Menu
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> 
837
Just add the . w-auto class to the table element to set an auto width to the table column. The width of the columns will automatically adjust to the content of the column.
HTML. Small table: To make the table smaller in size use the class table-sm along with the class table within the <table> tag. This reduces the cell padding to half. To make the dark table smaller in size use the combination of classes table, table-sm, and table-dark within the <table> tag.
Change column width , and then drag the boundary until the column is the width you want. To change the width to a specific measurement, click a cell in the column that you want to resize. On the Layout tab, in the Cell Size group, click in the Table Column Width box, and then specify the options you want.
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.
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
