表格单元格内元素丢失横向滚动的问题及实现方案

问题背景 #

表格内某单元格包含超长文本，希望该单元格内的文本可横向滚动，但放入表格后滚动效果消失，仅表格外的相同文本能正常滚动。

原代码示例：

CSS #

* {
  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;
}

HTML #

<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>

问题原因 #

表格默认采用table-layout: auto布局，会自动拉伸单元格宽度以适应内容，导致.code元素的width: 100%实际等于内容宽度，无法触发横向滚动。

解决方案一：修复表格内滚动效果 #

通过设置固定表格布局，限制单元格宽度，让代码列的内容超出时触发滚动：

修改后的CSS：

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

.main {
  overflow-x: hidden;
}

table {
  max-width: 100%;
  border-collapse: collapse;
  background-color: #ff0000;
  /* 设置固定表格布局 */
  table-layout: fixed;
  width: 100%;
}

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

/* 给行号列设置固定宽度 */
.linenos {
  width: 60px;
}

/* 代码列占剩余宽度 */
.code-cell {
  width: calc(100% - 60px);
}

tbody {
  background-color: #00ff00;
}

.code {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  /* 防止pre元素自动换行 */
  white-space: pre;
}

对应的HTML调整（给代码列td添加类名）：

<td class="code-cell">
    <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>

解决方案二：非表格实现（带Sticky行号） #

如果不想依赖表格，可通过Flex布局实现行号固定、代码列横向滚动的效果：

CSS #

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

.main {
  overflow-x: hidden;
}

.code-container {
  display: flex;
  border: 1px solid #32383e;
  background-color: #00ff00;
}

.linenos {
  /* 固定行号栏在左侧 */
  position: sticky;
  left: 0;
  width: 60px;
  padding: 0.25rem 0.5rem;
  border-right: 1px solid #32383e;
  background-color: #00ff00;
}

.code-wrap {
  flex: 1;
  overflow-x: auto;
}

.code {
  padding: 0.25rem 0.5rem;
  white-space: pre;
}

HTML #

<div class="main">
    <div class="code-container">
        <div class="linenos">
            <pre>1
2
3
</pre>
        </div>
        <div class="code-wrap">
            <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>
    </div>

    <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>

内容的提问来源于stack exchange，提问作者Xeverous