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

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

Answer 2

在添加table标记之前，先获取父div并放置样式溢出-x：auto;

<div class="table-responsive">
  <table class="table">
     enter code here
     enter code here
   </table>
</div>
.table-responsive{
overflow-x:auto;
}

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

2 个答案: