如何实现仅首列可水平滚动的HTML表格？首列内容需单行显示

要让表格第一列的超长单行文本可水平滚动，其他列保持正常显示，只需通过CSS对第一列单元格进行针对性样式设置即可，具体实现如下：

核心思路 #

给第一列的单元格设置固定宽度（或最大宽度），强制文本单行显示，并开启水平方向的溢出滚动。

完整代码示例 #

HTML结构 #

<table class="scroll-first-col">
  <thead>
    <tr>
      <th>超长描述列</th>
      <th>常规列2</th>
      <th>常规列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>这是一段长度远超列宽的单行描述文本，用来测试第一列的水平滚动效果——文本不会换行，仅能通过横向滚动查看全部内容</td>
      <td>示例内容2</td>
      <td>示例内容3</td>
    </tr>
    <tr>
      <td>另一段超长测试文本：abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=[]\;',./!@#$%^&*()_+{}|:"<>?</td>
      <td>示例内容2-2</td>
      <td>示例内容3-2</td>
    </tr>
  </tbody>
</table>

CSS样式 #

/* 基础表格样式 */
.scroll-first-col {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}

.scroll-first-col th,
.scroll-first-col td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

/* 第一列滚动核心样式 */
.scroll-first-col td:first-child,
.scroll-first-col th:first-child {
  width: 250px; /* 自定义列宽，可根据需求调整 */
  white-space: nowrap; /* 强制文本保持单行，不换行 */
  overflow-x: auto; /* 文本超出列宽时显示水平滚动条 */
}

/* （可选）美化滚动条样式 */
.scroll-first-col td:first-child::-webkit-scrollbar {
  height: 6px;
}

.scroll-first-col td:first-child::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 3px;
}

.scroll-first-col td:first-child::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

关键属性说明 #

• white-space: nowrap：禁止文本自动换行，确保第一列内容始终单行显示。
• overflow-x: auto：仅当内容宽度超过列宽时，显示水平滚动条，避免不必要的滚动条占用空间。
• width：固定第一列的宽度，你可以根据实际需求修改数值，也可以替换为max-width，让列宽在内容较短时自适应，超出时触发滚动。

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