css - 如何向 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

如果您有标题到您的表格列并且您不想滚动这些标题，那么这个解决方案可以帮助您:

此解决方案需要 table 元素内的 thead 和 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%;
}

Working fiddle

With comments

注意:如果您确定垂直滚动条始终存在，则可以使用 css3 calc 属性使 thead 单元格与 tbody 单元格对齐。

table.tableSection thead {
    padding-right:18px;   /* 18px is approx. value of width of scroll bar */
    width: calc(100% - 18px);
}

您可以通过使用 javascript 检测滚动条的存在并应用上述样式来执行相同的操作。