带有可滚动正文的表格

Question

我想在 html 中创建一个表格。该表应采用其父级 (100%) 的高度，以便滚动条位于底部 (X)。 Tbody 应该是可滚动的 (Y) 并采用其父级的宽度 (100%)。截至目前，Tbody 宽度已超过 100%（td？）。 Th 和 td 应该在一行中。 Th 应该取 td 的宽度，所以每一行都是一样的。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.wrap {
  height: 100%;
  border: 1px solid blue;
}

table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  border: 1px solid red;
}

th {
  text-align: left;
}

tbody {
  overflow-y: auto;
  height: 125px;
  border: 1px solid orange;
  display: block;
 
}

tr {
  display: table;
  table-layout: fixed;
  width: 100%;
}

th {
  border: 1px solid red;
  width: 100px;
}

th:nth-child(2n+1) {
  background-color: green;
  width: 200px;
}

<div class="wrap">
  <table>
  <thead>
    <tr>
      <th>H_a</th>
      <th>H_b</th>
      <th>H_c</th>
      <th>H_d</th>
      <th>H_e</th>
      <th>H_a</th>
      <th>H_b</th>
      <th>H_c</th>
      <th>H_d</th>
      <th>H_e</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
     <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
     <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
  </tbody>
</table>
</div>

Answer 1

您可以添加overflow:scroll 和display:block 以始终在表格中显示水平滚动条：
Add horizontal scrollbar to html table

如果您只想在必要时显示滚动条，请使用overflow:auto;而是。

要使所有列宽相同，请使用table-layout: fixed;