Bootstrap 4 - 响应式表格移动，精确宽度桌面答案

【问题标题】：Bootstrap 4 - Responsive Table Mobile, Exact Widths DesktopBootstrap 4 - 响应式表格移动，精确宽度桌面
【发布时间】：2020-12-24 08:43:44
【问题描述】：

用户可以创建自定义表格并以百分比为单位设置列宽，加起来为 100。

问题是这些设置的宽度使移动的桌子变得狭窄。

所以我的目标是在移动设备上使用引导程序“table-responsive”类水平滚动表格。

我尝试为移动媒体查询的表格列添加一个类以覆盖宽度，但这只会使表格更加狭窄。

//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>

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

【问题讨论】：

标签： html css twitter-bootstrap html-table

【解决方案1】：

当您将width 设置为auto 时，它会覆盖给定widths 的用户。如果你想使用他们给定的widths，你应该在手机屏幕上固定表格的宽度。

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

像这样，您将能够在小于 769 像素的屏幕上拥有一个带有 width = 769px 的表格。此外，可以应用用户给定的宽度，用户应该水平滚动以查看整个表格。

【讨论】：