javascript - 我如何创建一个带有滚动的 html 表格

Question

我有一个很大的 html 表(超过 3000 个元素)，但显然我不想一次显示所有内容。将显示部分表格，但大部分表格都将包含在一个具有滚动功能的小框中。我想要一张类似于本网站使用的表格:stackoverflow search table .我尝试做类似我的代码不起作用的事情:这是一个示例表:

.table {
  height: 150px;
  overflow-y: scroll;
  overflow-x: hidden;
}

<table id="myTable" class="table">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
</table>

滚动条永远不会出现在表格的一侧。我对 HTML 比较陌生

Answer 1

<table>元素不遵守溢出属性。通过将表设置为阻塞来强制溢出属性:

.table {
  display: block;
  height: 150px;
  overflow-y: scroll;
  overflow-x: hidden;
}

<table id="myTable" class="table">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
</table>

有了那么大的 table ，您将受益于 https://datatables.net/ 的额外服务可以带来:)