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

Question

I have an HTML table with one or multiple fixed-width columns. Sometimes the content of such a column exceeds the column width and I would like to have a scrollbar at the bottom of the table column.

• I would like to maintain the same semantic HTML structure and not have duplicate tables or multiple iterations.
• I would like to have as little JavaScript as possible
• I can turn this into a CSS Grid or Flexbox if that is possible there (but haven't used that before)

I've noticed that is HTML there is a colgroup and it looks like I can set the width and other CSS properties, but not 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;
}

Please check my Codepen example with what I've tried: Code sample

Answer 1

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

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

Answer 2

Before table tag , take a parent div and put style overflow-x:auto;

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