我有一个表中的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; }
解决方法
如果您有标题到您的表列,并且您不想滚动这些标题,那么此解决方案可以帮助您:
这个解决方案需要在table元素中包含ad和tbody标签。
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检测滚动条的存在并应用上面的样式来做同样的事情。