我有一个要在HTML5中添加一个滚动条的表。我希望表格显示十行,然后用户可以向下滚动以查看其他歌曲。如何添加滚动条?
这是我在HTML5中的表格代码:
<table id="my_table" table border="5"> <tr> <th>URL</th> </tr> <tr> <td>http://www.youtube.com/embed/evuSpI2Genw</td> </tr> <tr> <td>http://www.youtube.com/embed/evuSpI2Genw</td> </tr> </table>
这是我的CSS代码:
#my_table { border-radius: 20px; background-color: transparent; color: black; width: 500px; text-align: center; }
如果您有表列标题,并且不想滚动这些标题,那么此解决方案可以为您提供帮助:
这种解决方案需要thead和tbody内部标签table元素。
thead
tbody
table
table.tableSection { display: table; width: 100%; } table.tableSection thead, table.tableSection tbody { float: left; width: 100%; } table.tableSection tbody { overflow: auto; height: 150px; } table.tableSection tr { width: 100%; display: table; text-align: left; } table.tableSection th, table.tableSection td { width: 33%; }
注意 :如果您确定垂直滚动条始终存在,则可以使用css3 calc属性使thead细胞与tbody细胞对齐。
table.tableSection thead { padding-right:18px; /* 18px is approx. value of width of scroll bar */ width: calc(100% - 18px); }
通过使用javascript检测滚动条的存在并应用上述样式,您可以执行相同的操作。