表与水平滚动条

Question

我想在我的网站上有一张桌子。 问题是这个表格太宽（因为数据库中有很多记录）。 如何添加水平滚动条？现在我的表只是响应，文本正在这样做

这是我的 HTML 代码：

<table class="hoverable bordered">
    <thead>
        <tr>
            <th>Row1</th>
            <th>Row2</th>
            <th>Row3</th>
            <th>Row4</th>
            <th>Row5</th>
            <th>Row6</th>
            <th>Row7</th>
            <th>Row83</th>
            <th>Row9</th>
            <th>Row10</th>
            <th>Row11</th>
        </tr>
    </thead>
    </table>

Answer 1

你必须定义宽度和溢出属性。设置宽度＆gt; = 100％和overflow-x：auto;

Answer 2

您需要将以下css代码添加到head标记

中

table {
  overflow-x: scroll !important;
  display:    table;
  width:      100%;
  height:     100vh; /* Optional */
}

如果这不起作用，请尝试将表放在div中并为div设置overflow-x并保留表的display：table。