html - 具有固定宽度列的 HTML/CSS 表格（如果内容溢出则滚动）

Question

我有一个包含一个或多个固定宽度列的 HTML 表格。有时此类列的内容超过列宽，我想在表格列的底部有一个滚动条。

• 我想保持相同的语义 HTML 结构并且没有重复的表或多次迭代。
• 我希望 JavaScript 尽可能少
• 如果可能的话，我可以把它变成一个 CSS Grid 或 Flexbox（但以前没有使用过）

我注意到 HTML 有一个colgroup，看起来我可以设置width和其他 CSS 属性，但不能设置overflow.

<table class="table">
  <colgroup>
    <col class="table-colgroup table-colgroup--first">
    <col class="table-colgroup table-colgroup--second">
    <col class="table-colgroup table-colgroup--third">
  </colgroup>
  <tr class="table-row">
    <td class="table-cell table-cell--first">
      <p>First</p>
    </td>
    <td class="table-cell table-cell--second">
      <p>Second long column item that should have scroll 1</p>
    </td>
    <td class="table-cell table-cell--third">
      <p>Last column item</p>
    </td>
  </tr>
  <tr class="table-row">
    <td class="table-cell table-cell--first">
      <p>First</p>
    </td>
    <td class="table-cell table-cell--second">
      <p>Second long column item that should have scroll 2</p>
    </td>
    <td class="table-cell table-cell--third">
      <p>Last column item</p>
    </td>
  </tr>
  <tr class="table-row">
    <td class="table-cell table-cell--first">
      <p>First</p>
    </td>
    <td class="table-cell table-cell--second">
      <p>Second long column item that should have scroll 3</p>
    </td>
    <td class="table-cell table-cell--third">
      <p>Last column item</p>
    </td>
  </tr>
  <tr class="table-row">
    <td class="table-cell table-cell--first">
      <p>First</p>
    </td>
    <td class="table-cell table-cell--second">
      <p>Second long column item that should have scroll 4</p>
    </td>
    <td class="table-cell table-cell--third">
      <p>Last column item</p>
    </td>
  </tr>
  <tr class="table-row">
    <td class="table-cell table-cell--first">
      <p>First</p>
    </td>
    <td class="table-cell table-cell--second">
      <p>Second long column item that should have scroll 5</p>
    </td>
    <td class="table-cell table-cell--third">
      <p>Last column item</p>
    </td>
  </tr>
  <tr class="table-row">
    <td class="table-cell table-cell--first">
      <p>First</p>
    </td>
    <td class="table-cell table-cell--second">
      <p>Second long column item that should have scroll 6</p>
    </td>
    <td class="table-cell table-cell--third">
      <p>Last column item</p>
    </td>
  </tr>
</table>

.table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

.table-row {
  box-shadow: 0 0 1px 1px yellowgreen;
}

.table-cell {
  box-shadow: 0 0 1px 1px blue;
}

.table-colgroup--first {
  background: palegoldenrod;
}

.table-colgroup--second {
  background: paleturquoise;
  /*
   * I would like to pass the width of the column here
   */
  width: 50px;
  overflow-x: scroll;
}

.table-colgroup--third {
  background: palegreen;
} 

/* This is intentionally long so that a scrollbar appears somewhere */
.table-cell--second p {
  width: 900px;
  background: #666;
  color: #fff;
}

请用我尝试过的方法检查我的 Codepen 示例：代码示例

标签： htmlcsshtml-tablegrid

Answer 1

您只需要使用 overflow-x auto 将表格单元格的内容包装在一个 div 中，这将在 td 的内容大于单元格时触发滚动。

<td><div style="overflow-x: 'scroll'"><p>long line here</p></div>