将元素放入表格单元格而不会丢失溢出滚动

Question

我有一个表格，其中包含一个长行的单元格。我希望这一行是可滚动的，但是当我将这个元素准确地放入表中时，它会丢失滚动条。

我希望页面上有 2 个滚动，但只有文本的非表格副本是可滚动的。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  overflow-x: hidden;
}

table {
  max-width: 100%;
  border-collapse: collapse;
  background-color: #ff0000;
}

table td,
table th {
  padding: 0.25rem 0.5rem;
  border: 1px solid #32383e;
}

tbody {
  background-color: #00ff00;
}

.code {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

    <div class="main">
        <table class="codetable">
            <tbody>
                <tr>
                    <td class="linenos">
                        <div class="linenodiv">
                            <pre>1
2
3
</pre>
                        </div>
                    </td>
                    <td class="code">
                        <pre class="code">lorem
a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long line
ipsum
</pre>
                    </td>
                </tr>
            </tbody>
        </table>

        <pre class="code">lorem
a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long line
ipsum
</pre>

    </div>

https://jsfiddle.net/kheg1v6p/

如果在表格内做不到，那我怎么才能达到这个效果呢？

• 编号行
• 有些台词很长
• 第二列（第一列是行号）应该是可滚动的（同时保持行号可见 - 数字行应该像 CSS 中的

  sticky

  ）

Answer 1

编辑：添加

sticky

第一列。

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

table td:first-of-type {
  background-color: red;
  position: sticky;
  left: 0;
}

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table td:first-of-type {
  background-color: red;
  position: sticky;
  left: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  overflow-x: hidden;
}

table {
  max-width: 100%;
  border-collapse: collapse;
  background-color: #ff0000;
}

table td,
table th {
  padding: 0.25rem 0.5rem;
  border: 1px solid #32383e;
}

tbody {
  background-color: #00ff00;
}

.code {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

<div class="main">
  <table class="codetable">
    <tbody>
      <tr>
        <td class="linenos">
          <div class="linenodiv">
            <pre>1
2
3
</pre>
          </div>
        </td>
        <td class="code">
          <pre class="code">lorem
a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long line
ipsum
</pre>
        </td>
      </tr>
    </tbody>
  </table>

  <pre class="code">lorem
a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long line
ipsum
</pre>

</div>