Table column sizing
Updated 2018
Make sure your table includes the table
class. This is because Bootstrap 4 tables are "opt-in" so the table
class must be intentionally added to the table.
http://codeply.com/go/zJLXypKZxL
Bootstrap 3.x also had some CSS to reset the table cells so that they don't float..
table td[class*=col-], table th[class*=col-] {
position: static;
display: table-cell;
float: none;
}
I don't know why this isn't is Bootstrap 4 alpha, but it may be added back in the final release. Adding this CSS will help all columns to use the widths set in the thead
..
Bootstrap 4 Alpha 2 Demo
UPDATE (as of Bootstrap 4.0.0)
Now that Bootstrap 4 is flexbox, the table cells will not assume the correct width when adding col-*
. A workaround is to use the d-inline-block
class on the table cells to prevent the default display:flex of columns.
Another option in BS4 is to use the sizing utils classes for width...
<thead>
<tr>
<th class="w-25">25</th>
<th class="w-50">50</th>
<th class="w-25">25</th>
</tr>
</thead>
Bootstrap 4 Alpha 6 Demo
Lastly, you could use d-flex
on the table rows (tr), and the col-*
grid classes on the columns (th,td)...
<table class="table table-bordered">
<thead>
<tr class="d-flex">
<th class="col-3">25%</th>
<th class="col-3">25%</th>
<th class="col-6">50%</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-sm-3">..</td>
<td class="col-sm-3">..</td>
<td class="col-sm-6">..</td>
</tr>
</tbody>
</table>
Bootstrap 4.0.0 (stable) Demo
Note: Changing the TR to display:flex can alter the borders
Another option is to apply flex styling at the table row, and add the col-classes
to the table header / table data elements:
<table>
<thead>
<tr class="d-flex">
<th class="col-3">3 columns wide header</th>
<th class="col-sm-5">5 columns wide header</th>
<th class="col-sm-4">4 columns wide header</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-3">3 columns wide content</th>
<td class="col-sm-5">5 columns wide content</th>
<td class="col-sm-4">4 columns wide content</th>
</tr>
</tbody>
</table>
Using d-flex
class works well but some other attributes don't work anymore like vertical-align: middle
property.
The best way I found to size columns very easily is to use the width
attribute with percentage only in thead
cells.
<table class="table">
<thead>
<tr>
<th width="25%">25%</th>
<th width="25%">25%</th>
<th width="50%">50%</th>
</tr>
</thead>
<tbody>
<tr>
<td>25%</td>
<td>25%</td>
<td>50%</td>
</tr>
</tbody>
</table>