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

Question

我在div里面有一张桌子。 div具有固定的宽度。如果table（td）的内容很大，则表从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;     
}

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