Table column sizing

Question

In Bootstrap 3, I could apply col-sm-xx to the th tags in the thead and resize table columns at will. However this doesn't work in bootstrap 4. How can I achieve something like this in bootstrap 4?

<thead> <th class="col-sm-3">3 columns wide</th> <th class="col-sm-5">5 columns wide</th> <th class="col-sm-4">4 columns wide</th> </thead> 

Looking at the codeply provided it doesn't size properly, especially if you add some data to the table. See how this runs:

<div class="container" style="border: 1px solid black;">     <table class="table table-bordered">     <thead>         <tr class="row">             <th class="col-sm-3">3 columns wide</th>             <th class="col-sm-5">5 columns wide</th>             <th class="col-sm-4">4 columns wide</th>         </tr>     </thead>     <tbody>         <tr>             <td>123</td>             <td>456</td>             <td>789</td>         </tr>     </tbody> </table> </div> 

Answer 1

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

Answer 2

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>