html-如何在Bootstrap响应式选项卡中设置列的大小

如何在Bootstrap响应表中设置列的大小? 我不希望桌子失去响应能力。 我也需要它在IE8中工作。 我已包含HTML5SHIV和“响应”。

我正在使用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>
3个解决方案
95 votes

Bootstrap 4.0

请注意从Bootstrap 3到4的所有迁移更改。现在,在表上,您需要通过添加类col-xs-*并放下<td>来启用弹性框,以允许引导程序自动检测视口。

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

引导

Bootstrap 3.2

表列的宽度与网格使用相同的布局; 请记住,列大小总计为12;使用col-xs-*。 在此示例中为<td>

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

记住要设置col-xs-*元素,而不要设置<td>元素,以便它设置整个列。 这是一个正在运行的BOOTPLY。

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

Jordan.J.D answered 2020-08-09T19:47:03Z
16 votes

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

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

Dan answered 2020-08-09T19:47:32Z
0 votes

您可以将以下Bootstrap类与

<tr class="w-25">

</tr>

有关更多详细信息,请检查以下页面[https://getbootstrap.com/docs/4.1/utilities/sizing/]

dev answered 2020-08-09T19:47:56Z
translate from https://stackoverflow.com:/questions/25385289/how-to-set-the-size-of-a-column-in-a-bootstrap-responsive-table