时间戳

首页 > 解决方案 > Bootstrap 4 - 响应式表格移动，精确宽度桌面

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

问题描述

用户可以创建自定义表格并以百分比为单位设置列宽，加起来为 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>

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

标签： htmlcsstwitter-bootstraphtml-table

解决方案

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

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

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

推荐阅读