如何在 Bootstrap 响应表中设置列的大小答案

【问题标题】：How to set the size of a column in a Bootstrap responsive table如何在 Bootstrap 响应表中设置列的大小
【发布时间】：2014-10-12 15:56:22
【问题描述】：

如何在 Bootstrap 响应式表格中设置列的大小？我不希望表格失去其响应功能。我也需要它在 IE8 中工作。我已经包含了 HTML5SHIV 和 Respond。

我正在使用 Bootstrap 3 (3.2.0)

<div class="table-responsive">
    <table id="productSizes" class="table">
        <thead>
            <tr>
                <th>Size</th>
                <th>Bust</th>
                <th>Waist</th>
                <th>Hips</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>6</td>
                <td>79 - 81</td>
                <td>61 - 63</td>
                <td>89 - 91</td>
            </tr>
            <tr>
                <td>8</td>
                <td>84 - 86</td>
                <td>66 - 68</td>
                <td>94 - 96</td>
            </tr>
        </tbody>
    </table>
</div>

【问题讨论】：

您可以为列设置最大宽度
我认为在 bootstrap 中您可以使用以下选项指定列宽：<tr class='grid_2'><td></td><tr>，因为 bootstrap 是基于 12 列响应式网格，您需要将 grid_6 应用于每个假设您想要 100% 宽度的行 - 您应该能够在引导 API 中找到所有这些信息

标签： css html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

引导 4.0

注意从 Bootstrap 3 到 4 的所有 migration 更改。现在，您需要通过添加类 d-flex 来启用弹性框，并删除 xs 以允许引导程序自动检测视口。

<div class="container-fluid">
    <table id="productSizes" class="table">
        <thead>
            <tr class="d-flex">
                <th class="col-1">Size</th>
                <th class="col-3">Bust</th>
                <th class="col-3">Waist</th>
                <th class="col-5">Hips</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-1">6</td>
                <td class="col-3">79 - 81</td>
                <td class="col-3">61 - 63</td>
                <td class="col-5">89 - 91</td>
            </tr>
            <tr class="d-flex">
                <td class="col-1">8</td>
                <td class="col-3">84 - 86</td>
                <td class="col-3">66 - 68</td>
                <td class="col-5">94 - 96</td>
            </tr>
        </tbody>
    </table>

bootply

引导 3.2

Table 列宽使用与grids 相同的布局；使用col-[viewport]-[size]。请记住，列大小应总计为 12； 1 + 3 + 3 + 5 = 12 在这个例子中。

        <thead>
            <tr>
                <th class="col-xs-1">Size</th>
                <th class="col-xs-3">Bust</th>
                <th class="col-xs-3">Waist</th>
                <th class="col-xs-5">Hips</th>
            </tr>
        </thead>

请记住设置<th> 元素而不是<td> 元素，以便设置整个列。这是一个有效的BOOTPLY。

感谢@Dan 提醒我始终首先使用移动视图 (col-xs-*)。

【讨论】：

@user3362232 正在修复；感谢您的评论；我强调的是不同大小的列的情况。这次我用谷歌搜索了数学来确定。
毫无疑问，明白了，也许我错过了......我只是说因为我相信默认应该是col-xs-..，因为它总是会响应并被更大的屏幕继承。而col-lg-.. 仅适用于大屏幕。
如果表格中没有<th> 元素怎么办？
刚刚用 Bootstrap 4 测试了这个，它在 Chrome 和 Opera 中不起作用。
@JFloresI，当前答案是 3.2，很快会更新 v4 部分。

【解决方案2】：

您可以使用内联样式并在<th> 标记中定义宽度。使其宽度之和 = 100%。

<tr>
   <th style="width:10%">Size</th>
   <th style="width:30%">Bust</th>
   <th style="width:50%">Waist</th>
   <th style="width:10%">Hips</th>
</tr>

Bootply demo

通常使用内联样式并不理想，但这确实提供了灵活性，因为您可以获得非常具体和精确的宽度。

【讨论】：

如果您需要确保列的宽度相等或具有某种比例宽度，则效果非常好。似乎百分比宽度不需要加到 100%，因此也很容易适用于动态表（至少对于 Chrome）

【解决方案3】：

您可以将以下 Bootstrap 类与

一起使用

<tr class="w-25">

</tr>

更多详情请查看以下页面 https://getbootstrap.com/docs/4.1/utilities/sizing/

【讨论】：