具有固定宽度列的 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 示例和我试过的内容:Code sample

Answer 1

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

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