How to set the size of a column in a Bootstrap responsive table

Question

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>

This question is related to css html twitter-bootstrap twitter-bootstrap-3

User · Accepted Answer

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    lt div class  container-fluid  gt       lt table id  productSizes  class  table  gt           lt thead gt               lt tr class  d-flex  gt                   lt th class  col-1  gt Size lt  th gt                   lt th class  col-3  gt Bust lt  th gt                   lt th class  col-3  gt Waist lt  th gt                   lt th class  col-5  gt Hips lt  th gt               lt  tr gt           lt  thead gt           lt tbody gt               lt tr class  d-flex  gt                   lt td class  col-1  gt 6 lt  td gt                   lt td class  col-3  gt 79 - 81 lt  td gt                   lt td class  col-3  gt 61 - 63 lt  td gt                   lt td class  col-5  gt 89 - 91 lt  td gt               lt  tr gt               lt tr class  d-flex  gt                   lt td class  col-1  gt 8 lt  td gt                   lt td class  col-3  gt 84 - 86 lt  td gt                   lt td class  col-3  gt 66 - 68 lt  td gt                   lt td class  col-5  gt 94 - 96 lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt      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            lt thead gt               lt tr gt                   lt th class  col-xs-1  gt Size lt  th gt                   lt th class  col-xs-3  gt Bust lt  th gt                   lt th class  col-xs-3  gt Waist lt  th gt                   lt th class  col-xs-5  gt Hips lt  th gt               lt  tr gt           lt  thead gt    Remember to set the  lt th gt  elements rather than the  lt td gt  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

User · Answer

You could use inline styles and define the width in the <th> tag. Make it so that the sum of the widths = 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

Typically using inline styles is not ideal, however this does provide flexibility because you can get very specific and granular with exact widths.

User · Answer

you can use the following Bootstrap class with    lt tr class  w-25  gt    lt  tr gt    for more details check the following page https   getbootstrap com docs 4 1 utilities sizing

[css] How to set the size of a column in a Bootstrap responsive table

The answer is

Bootply demo

Examples related to css

Examples related to html

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Tags