Tables in html behaves differently than other elements on a page since the table, rows, th and td elements are displayed in a special way. The column width is automatically adjusted based on the content.
Here is a trick to set the column width using the colgroup element which affects both the th and td at once.
A table with 3 columns and 2 rows:
<table> <colgroup> <col class="col-select" /> <col class="col-product" /> <col class="col-country" /> </colgroup> <thead> <tr> <th>Select</th> <th>Product</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox">Select</td> <td>Product 1</td> <td>Sweden</td> </tr> <tr> <td><input type="checkbox">Select</td> <td>Product 2</td> <td>Norway</td> </tr> </tbody> </table>
We have 3 columns: Select, Product and Country
To set the widths we use css classes col-select and so on.
.col-select { width: 1%; } .col-product { width: 75%; } .col-country { width: 24%; }
Here we set the select to be as “narrow” as possible (1%). And the others to relative % numbers.
To further “force” the widths we should allow long words to be wrapped, e.g add the following css class for the columns you wish this behavior for:
.text-break { overflow-wrap: break-word; }
Usage:
<colgroup> <col class="col-select" /> <col class="col-product text-break" /> <col class="col-country text-break" /> </colgroup>