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>