Bootstrap 4-响应式表移动设备，确切宽度的桌面

问题描述

用户可以创建自定义表格并设置列宽（以百分比计），总计100。

问题是这些设置的宽度使移动电话的表格狭窄。

所以对于移动设备，我的目标是使表格可通过引导“表响应”类水平滚动。

我尝试在表列中添加一个类，以用于移动媒体查询来覆盖宽度，但这只会使表更加局促。

//css
@media (max-width: 769px) {
    .wiki-table-c-width {
        width: auto !important;
    }
  }

//example table html 

<div class ="table-responsive">
    <table class ="table table-bordered table-striped">
        <tr> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> </tr>
    </table>
</div>

因此基本上可以在桌面上设置宽度。（实际上，它们可以是任何东西，用户可以选择），自动宽度和可在移动设备上水平滚动。

解决方法

将width设置为auto时，它将覆盖被赋予width个用户的用户。如果要使用给定的width，则应在移动屏幕上固定表格的宽度。

@media (max-width: 769px) {
    table {
        width: 769px !important;
    }
}

像这样的事情，您将可以在小于769px的屏幕上创建带有width = 769px的表格。此外，可以应用用户给定的宽度，并且用户应水平滚动以查看整个表格。

html html-table twitter-bootstrap