如何将滚动条添加到HTML5表？

Question

我有一个要在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;
}

Answer 1

如果您有表列标题，并且不想滚动这些标题，那么此解决方案可以为您提供帮助：

这种解决方案需要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检测滚动条的存在并应用上述样式，您可以执行相同的操作。