html - 在减小窗口大小的同时启用表格滚动

Question

我在 div 中有一个表格。 div 有一个固定的宽度。如果 table(td) 的内容很大，则 table 从 div 溢出。考虑一下我的 HTML 看起来像

<div>
    <table border="1" cellspacing="0">
        <tr><th>Name</th><th>Text</th></tr>
        <tr><td>abc</td><td>vvvvvvnvjfdjfjfdjdfjjddjfkjfdjfdkjdf</td></tr>
        <tr><td>xyz</td><td>hfhdjhjfdhjhdfjhdfjdfhfdhjfdhjdfhjfd</td></tr>
    </table>
</div>

为了避免这个问题，我使用

table{
    table-layout:fixed;     
}
td{
     word-wrap: break-word;
}

现在表格是这样的

.

没关系。现在我想调整适合移动设备的窗口大小。 那么表格应该是这样的

那是我想避免自动换行并使表格水平滚动。

我只想要移动设备屏幕的水平滚动。我可以在

中为移动设备编写 css

@media (max-width: 767px)
.table-responsive > table {

}

由于我对表格使用 table-layout:fixed;，因此移动设备的滚动属性不起作用。但我无法删除 table-layout:fixed; 属性，因为它用于其他设备(计算机)。

Answer 1

终于找到解决方案了..

@media (max-width: 767px)
.table-responsive > table {
table-layout: auto !important;
}

对于移动设备采用上述 css。而对于其他设备(计算机)需要

table{
    table-layout:fixed;     
}

注意:水平滚动的代码我已经有了。