108

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>
Brendan Vogt
  • 25,678
  • 37
  • 146
  • 234
  • 1
    You can set a max-width to the column – WhiteLine Aug 19 '14 at 13:57
  • I thought in bootstrap you could specify the columns widths by using options such as : ``, 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 '14 at 14:00

3 Answers3

187

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.

Marian
  • 14,759
  • 6
  • 32
  • 44
Jordan.J.D
  • 7,999
  • 11
  • 48
  • 78
  • Your grid should add up to a total of 12, not up to 12 so the first one should also be 3 – DivineChef Aug 19 '14 at 16:34
  • 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 '14 at 16:35
  • Also, you should probably use something lower than `col-lg` since this will only apply on large screens – Dan Aug 19 '14 at 17:16
  • @Dan , I have already specified that you can change the viewport. I used lg as an example. – Jordan.J.D Aug 19 '14 at 17:21
  • 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 '14 at 17:28
  • @Dan mobile first; i need to keep that in my mind more often thank you. I have made the edit. – Jordan.J.D Aug 19 '14 at 17:28
  • 2
    What if I don't have a `` element in the table? – mrudult Aug 08 '16 at 11:09
  • 3
    Just tested this with Bootstrap 4 and it does not work in Chrome and Opera. – JFloresI Mar 22 '18 at 18:07
  • 1
    @JFloresI, current answer is for 3.2, will update with a v4 section soon. – Jordan.J.D Mar 22 '18 at 18:14
  • Hi, can you pay a visit to my question slightly related to this – Dekso Jun 05 '18 at 07:53
  • @Jordan.J.D - would I be correct in assuming that the column sizes should add up to a multiple of 12? I sometimes have more than 12 columns in a particular table, so would I therefore be ok summing to 24 instead of 12? – w5m Aug 07 '18 at 15:27
  • @w5m no, 12 columns is the maximum width. 24 columns will be 2 full rows. but it will probably force them in one row resulting in side scrolling page. – Jordan.J.D Aug 07 '18 at 15:47
  • This solution/ workaround looks promising, however won't work properly with `colspan`, `rowspan` enabled cells for some reason. – thednp Oct 31 '19 at 10:32
  • This works with Bootstrap 5 as well. – dfrankow Jul 30 '23 at 18:12
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.

Dan
  • 9,391
  • 5
  • 41
  • 73
  • 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 '17 at 21:54
  • This option still works with Bootstrap 5.3 tables. – JoshYates1980 Jun 30 '23 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/

dev
  • 71
  • 1
  • 2