向 HTML 表格添加水平滚动条

Question

有没有办法在 HTML 表格中添加水平滚动条？我实际上需要它可以垂直和水平滚动，具体取决于表格的增长方式，但我无法让任一滚动条出现。

原文由 Tsundoku 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您是否尝试过 CSS overflow 属性？

 overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

更新

正如其他用户指出的那样， 这不足以 添加滚动条。

因此，请查看并支持下面的评论和答案。

原文由 pasine 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

首先，制作一个 display: block 你的桌子

然后，将 overflow-x: 设置为 auto 。

 table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

漂亮干净。没有多余的格式。

以下是我网站页面上 滚动表格标题的更多示例。

如果出现有关单元格未填满整个表格的问题，请附加以下额外的 CSS 代码：

 table tbody {
    display: table;
    width: 100%;
}

原文由 Serge Stroobandt 发布，翻译遵循 CC BY-SA 4.0 许可协议