跨浏览器兼容滚动表

我想制作占用屏幕50％的表格。但是，如果有比表格更多的信息，它应该是可滚动的。我一直在尝试很多不同的方式来做到这一点，但没有找到工作。它需要跨浏览器兼容所有现代浏览器，最好是旧浏览器。我怎样才能做到这一点？提前致谢！ Note: I am using 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等。没有显示滚动条

来源

2016-11-11 HittmanA

后一些代码的东西，显示你正在做的事情 - 至少发布一个示例表，让我们没有做一个帮助你。创建一个代码片段。你是什么意思，它不适用于“所有浏览器”？用'overflow-y'设置为'scroll'的表格创建容器 – junkfoodjunkie

我正在投票结束这个问题，因为这是为了帮助您编写标记而不是为您写标记。 – Rob

对不起，没有包含代码片段。让我快速编辑@Rob – HittmanA

首先把你的表放入一个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参考。

来源

2016-11-11 03:19:19 user3771102

看起来不错，但有一个问题：有没有办法用固定标题做到这一点？ – HittmanA

如果这是您首先要查找的内容，那么您应该首先在Google中进行搜索，因为有很多方法可以使用不同类型的语言进行搜索。阅读此内容，以便了解如何对其进行编码。 http://stackoverflow.com/a/17380697/3771102 – user3771102

我做到了。不幸的是我没有找到。 – HittmanA

跨浏览器兼容滚动表

回答

相关问题