Tables are strange HTML elements. If we put CSS rule to whole table: width: 100%; then columns inside that will try to use space of whole table, sometimes it will fit the longest word in one column, sometimes it will just try to fit columns widths more or less proportional to the longest word in each column.
In our example we will have HTML code like below. You can find it also HERE on our Gitlab.
<div class="wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hans</td>
<td>Burgmeister</td>
<td>34</td>
<td>Berlin</td>
<td>Germany</td>
</tr>
<tr>
<td>John</td>
<td>Clark</td>
<td>23</td>
<td>Derby</td>
<td>UK</td>
</tr>
<tr>
<td>Juri</td>
<td>Shewchwnov</td>
<td>66</td>
<td>Moscow</td>
<td>Russia</td>
</tr>
<tr>
<td>Amalesh</td>
<td>Gupta</td>
<td>54</td>
<td>Pune</td>
<td>India</td>
</tr>
</tbody>
</table>
</div>With generic CSS code applied for all examples, like below:
* {
box-sizing: border-box;
}
.wrapper {
width: 503px;
border: 1px solid black;
}
table {
width: 100%;
border-spacing: 2px;
border-collapse: collapse;
}
table th,
table td {
border: 1px solid #dadada;
}
1st case – We want to have all columns with the same width. This is easy, in CSS we need to add code like that: table { table-layout: fixed; }. And done, all columns has the same width. Check example below or download it HERE:
Results:
2nd case – But What to do if we want to define manually widths of columns? We must use html class attribute, or, better, make use of CSS para-classes, with defined widths:
/* CASE STYLES */
table th:nth-child(1) { width: 150px; }
table th:nth-child(2) { width: 150px; }
table th:nth-child(3) { width: 40px; }
table th:nth-child(4) { width: 80px; }
table th:nth-child(5) { width: 80px; }
Results below, or you can download HERE:
3rd case – you have very long words in one column, and it is not possible to fit any width size to display it properly. So you must… break the words in cells to make it well looking. Lets change on surname in our table example into, the longest officially German surname: Wolfeschlegelsteinhausenbergerdorff. But for our purpose, lest double it into WolfeschlegelsteinhausenbergerdorffWolfeschlegelsteinhausenbergerdorff.
What do we get than? We are in CSS code from case 2nd, so with defined widths of columns, and it looks now like below:
We can see that whole table is not fitting the wrapper element, it is much wider, and Surname column looks bad. We need to break words inside one cell. It is very easy, we must add only one CSS rule:
/* CASE STYLES */
table th:nth-child(1) { width: 150px; }
table th:nth-child(2) { width: 150px; }
table th:nth-child(3) { width: 40px; }
table th:nth-child(4) { width: 80px; }
table th:nth-child(5) { width: 80px; }
table td {
word-break: break-all;
}and than we have nice looking table like on image below. You can download example HERE:
