Question

我正在尝试制作占据屏幕50％的表格。但是，如果有超过表可以容纳的信息，它应该是可滚动的。我一直在尝试许多不同的方法来做到这一点，但我找不到任何方法。它需要跨浏览器兼容所有现代浏览器，最好是旧版浏览器。我怎样才能做到这一点？提前致谢！ Note: I am using w3.css 我试过的一些代码：

＆＃13;

table {
  height: 100px;
  overflow-y: scroll;
}

＆＃13;

<table class="w3-table-all">
<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Adam</td>
    <td>Johnson</td>
    <td>67</td>
  </tr>
</tbody>
</table>

＆＃13;

我尝试过这样做，但它仍然无法正常工作。我也尝试了各种组合，为tbody，tr，td等设计样式。没有显示滚动条

Answer 1

首先将您的表放在div中，然后将指定的高度和溢出放到该div的类中，以便它可以滚动。

<强> CSS

.table-scroll {
  border: 1px solid #000;
  width:50%;
  height: 100px;
  overflow-y: scroll;
}

<强> HTML

<div class="table-scroll">
<table class="w3-table-all">
<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
<tbody>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
<tr>
  <td>Adam</td>
  <td>Johnson</td>
  <td>67</td>
</tr>
</tbody>
</table>
</div>

以下是jsfiddle中的参考资料。

跨浏览器兼容的可滚动表

1 个答案: