如何在Bootstrap响应表中设置列的大小 [英] How to set the size of a column in a Bootstrap responsive table

问题描述

如何在Bootstrap响应表中设置列的大小？我不希望桌子放松其反应功能。我也需要它在IE8中工作。我已经包含HTML5SHIV和Respond。

我使用Bootstrap 3（3.2.0）

pre > < div class =table-responsive>
< table id =productSizesclass =table>
< thead>
< tr>
< th>大小< / th>
胸围< th>
腰围< / th>
< th>臀部< / 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 4.0 p>

请注意所有迁移更改从Bootstrap 3到4.在桌面上，您现在需要通过添加类 d-flex 来启用柔性框，然后删除 xs 允许引导自动检测视口。

 < div class =container-fluid> 
< table id =productSizesclass =table> 
< thead> 
< tr class =d-flex> 
< th class =col-1>大小< / th> 
< th class =col-3> Bust< / th> 
< th class =col-3>腰围< / 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

表格列宽使用与< a href =http://getbootstrap.com/css/#grid =nofollow noreferrer> grids ;使用 col- [viewport] - [size] 。记住柱子尺寸应该总计12; 1 + 3 + 3 + 5 = 12 在这个例子中。

  < THEAD> 
< tr> 
< th class =col-xs-1>大小< / th> 
< th class =col-xs-3>胸围< / th> 
< th class =col-xs-3>腰围< / th> 
< th class =col-xs-5>臀围< / th> 
< / tr> 
< / thead> 
  

记得设置< th> 元素而不是< td> 元素，因此它设置了整个列。这里是一个有效的 BOOTPLY 。

谢谢to @Dan提醒我总是首先使用移动视图（ col-xs - * ）。

How do you set the size of a column in a Bootstrap responsive table? I don't want the table to loose its reponsive features. I need it to work in IE8 as well. I have included HTML5SHIV and Respond.

I'm using 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 4.0

Be aware of all migration changes from Bootstrap 3 to 4. On the table you now need to enable flex box by adding the class d-flex, and drop the xs to allow bootstrap to automatically detect the viewport.

<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

Table column width use the same layout as grids do; using col-[viewport]-[size]. Remember the column sizes should total 12; 1 + 3 + 3 + 5 = 12 in this example.

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

Remember to set the <th> elements rather than the <td> elements so it sets the whole column. Here is a working BOOTPLY.

Thanks to @Dan for reminding me to always work mobile view (col-xs-*) first.

这篇关于如何在Bootstrap响应表中设置列的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！