html - 跨浏览器兼容的可滚动表

标签 html css scroll cross-browser

<分区>

我正在尝试制作一个占据屏幕 50% 的表格。但是,如果表格无法容纳更多信息,则它应该是可滚动的。我一直在尝试许多不同的方法来做到这一点,但我发现没有一个有效。它需要跨浏览器兼容所有现代浏览器,最好是旧浏览器。我怎样才能做到这一点?提前致谢! 注意:我使用的是 w3.css 我试过的一些代码:

table {
  height: 100px;
  overflow-y: 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>

我已经试过了,但还是不行。我还尝试了各种组合,为 tbody、tr、td 等设置样式。没有一个显示滚动条

最佳答案

首先将您的表格放在一个 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 中的引用.

关于html - 跨浏览器兼容的可滚动表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40540454/

相关文章:

javascript - 滚动在移动版本中不起作用

javascript - 不可能在一个页面中使用两次 JavaScript

css - 非常棘手的 CSS 滚动问题

javascript - ECMA6 中的 promise : How to modify promise to hold its resolved value after that promise has already been returned in a function?

css - HTML5 视频溢出问题

javascript - 将视口(viewport)设置为缩放以适应宽度和高度

css - 选择放置在另一个元素之后但不是立即放置的第一个元素

css - objectBoundingBox 外的 SVG 动画不考虑溢出

html - 字体颜色不符合 textarea 和选择框的 css 中指定的样式

html - CSS 将鼠标悬停在邻居上以切换属性