110

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>
2
  • 1
    You can set a max-width to the column
    – WhiteLine
    Aug 19, 2014 at 13:57
  • I thought in bootstrap you could specify the columns widths by using options such as : <tr class='grid_2'><td></td><tr>, seen as bootstrap is based on a 12 column responsive grid, you would need to apply grid_6 to each row assuming you want 100% width - you should be able to find all that info in the bootstrap API
    – Halfpint
    Aug 19, 2014 at 14:00

3 Answers 3

189

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.

14
  • 1
    @user3362232 fixing now; thanks for the comment; i was emphasizing a situation with different sized columns. i googled the math to make sure this time.
    – Jordan.J.D
    Aug 19, 2014 at 16:35
  • 2
    No doubt, got it and maybe I missed that...I was just saying that since I believe the default should be col-xs-.. since that will always be responsive and inherited by larger screens. Whereas col-lg-.. only works on large screens.
    – Dan
    Aug 19, 2014 at 17:28
  • 2
    What if I don't have a <th> element in the table?
    – mrudult
    Aug 8, 2016 at 11:09
  • 3
    Just tested this with Bootstrap 4 and it does not work in Chrome and Opera.
    – JFloresI
    Mar 22, 2018 at 18:07
  • 1
    @JFloresI, current answer is for 3.2, will update with a v4 section soon.
    – Jordan.J.D
    Mar 22, 2018 at 18:14
38

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.

2
  • 2
    Works really well if you need to make sure that columns are of equal width or of some kind of proportional width. It also seems the widths in percent don't need to add up to 100% so works for dynamic tables easily too (at least for Chrome)
    – kashiraja
    Jun 23, 2017 at 21:54
  • 1
    This option still works with Bootstrap 5.3 tables. Jun 30 at 17:43
7

you can use the following Bootstrap class with

<tr class="w-25">

</tr>

for more details check the following page https://getbootstrap.com/docs/4.1/utilities/sizing/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.