如何在 Bootstrap 响应式表格中设置列的大小

Question

如何在 Bootstrap 响应式表格中设置列的大小

csshtmltwitter-bootstraptwitter-bootstrap-3

110

如何在 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>

- Brendan Vogt

1

你可以为列设置最大宽度。 - WhiteLine

我认为在Bootstrap中，您可以使用选项指定列宽，例如：<tr class='grid_2'><td></td><tr>。由于Bootstrap基于12列响应式网格，假设您想要100％的宽度，则需要将grid_6应用于每行 - 您应该能够在Bootstrap API中找到所有这些信息。 - Halfpint

3个回答

38

您可以使用内联样式，在<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演示

通常使用内联样式并不理想，但是这样做提供了灵活性，因为您可以非常具体和精确地设置宽度。

- Dan

2

如果您需要确保列的宽度相等或按比例分配，这个功能非常好用。而且，百分比宽度似乎不需要加起来等于100%，因此对于动态表格也很容易使用（至少在Chrome中）。 - kashiraja

1

此选项仍适用于Bootstrap 5.3表格。 - JoshYates1980

7

您可以使用以下Bootstrap类与

<tr class="w-25">

</tr>

更多详细信息，请查看以下页面：https://getbootstrap.com/docs/4.1/utilities/sizing/

- dev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jordan.J.D · Accepted Answer

Bootstrap 4.0

需要注意 Bootstrap 3 到 4 所有迁移的变化。现在在表格中，您需要通过添加类d-flex启用 flex box，并删除xs以允许 bootstrap 自动检测视口。

<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

Bootstrap 3.2

表格列宽度使用与网格相同的布局，使用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-*)。