Here is the HTML code for a table:
<table class='census'>
<tr>
<th colspan="2">My Title</th>
</tr>
<tr>
<td colspan="2" class='chart'><SOME PIE CHART, GENERATED WITH JS></td>
</tr>
<tr>
<td>Some title</td>
<td>Some Data</td>
</tr>
<tr>
<td>Some title</td>
<td>Some Data</td>
</tr>
<tr>
<td>Some title</td>
<td>Some Data</td>
</tr>
<tr>
<td>Some title</td>
<td>Some Data</td>
</tr>
<tr>
<td>Some title</td>
<td>Some Data</td>
</tr>
</table>
In order to set a fixed width for the first column of this table, you can use CSS like this:
.census td:first-child {
background-color: #F0F8FE;
width: 250px;
}
However, applying a fixed width to all first <td> tags including the one with colspan="2" that contains the chart created with JavaScript may cause issues. One possible solution could be:
.census td:first-child:not(.chart) {
background-color: #F0F8FE;
width: 250px;
}
But this might not work as expected in all browsers and can lead to unexpected results. If you're facing difficulties with implementing this, seeking further assistance or alternatives would be advisable.