I want to create 4 columns table 100% width
and each column has two smaller cells with 15% of the width (cella A) and second cell the rest of the space in a given column (cell B)
But it doesn’t works – cell A is much wider than 15%
Can You help me?
<table style="width: 100%; table-layout: fixed; border: 1px solid black;">
<tr>
<td colspan="2" style="border: 1px solid black;width: 25%;">Kolumna 1</td>
<td colspan="2" style="border: 1px solid black;width: 25%;">Kolumna 2</td>
<td colspan="2" style="border: 1px solid black;width: 25%;">Kolumna 3</td>
<td colspan="2" style="border: 1px solid black;width: 25%;">Kolumna 4</td>
</tr>
<tr>
<td style="width: 15%; border: 1px solid black;">A</td>
<td style="border: 1px solid black;">B</td>
<td style="width: 15%; border: 1px solid black;">A</td>
<td style="border: 1px solid black;">B</td>
<td style="width: 15%; border: 1px solid black;">A</td>
<td style="border: 1px solid black;">B</td>
<td style="width: 15%; border: 1px solid black;">A</td>
<td style="border: 1px solid black;">B</td>
</tr>
</table>
2
Answers
Cell width is decided by first row, the cells in first row is 12.5% * 2 (
colspan="2"
), so the cells in other row will be 12.5% too.You can add flexbox or grid in second row, and modify their width as you want.
If you added a
colgroup
and some more semantic markup specific to atable
element you can move all the sizing and styling into CSS and very easily set the 15% & 10% alternating columns which your question suggests is the desired outcome.