Same width cells in table column? - html

Question

I have read the following:
-autoformatting-1. HTML table: keep the same width for columns
-autoformatting-1. "If you set the style table-layout: fixed; on your table, you can override the browser's automatic column resizing. The browser will then set column widths based on the width of cells in the first row of the table." - This doesn't work in Firefox 66.0.4 and never has for me. Check out https://jsfiddle.net/x342vchn/ :
table {
table-layout: fixed;
}
td {
border: 1px solid #000;
overflow: hidden;
overflow-wrap: break-word;
}
.narrow {
max-width: 20px; /* Without this, the first table doesn't work either! */
width: 20px;
}
<table>
<tbody>
<tr>
<td class="narrow">sdkajdwaudawjdjawhdwjahdawjdhajh</td>
<td>hi</td>
</tr>
<tr>
<td>hi</td>
<td>hi</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td class="narrow">hi</td>
<td>hi</td>
</tr>
<tr>
<td>sdkajdwaudawjdjawhdwjahdawjdhajh</td>
<td>hi</td>
</tr>
</tbody>
</table>
The first table "works" because the wide content is in the cell that has the max-width restriction. The second table ignores everything.
-autoformatting-2. Set the table column width constant regardless of the amount of text in its cells?
-autoformatting-2. In this case, the answer suggests setting the same width on all cells.
If I want to set the same height for cells in a row, I can target them with a class on the row. So how do I set the same fixed width on cells in a column without specifically setting the max-width and width of all affected cells?
I have done some web searching, and blogs suggest the same as the first answer, but it does not work.
I have also tried setting the width of the first cell (th) in a thead. That made no difference either.
Am I missing something or is Firefox broken?
Currently, I'm using the same class on all cells of a certain width, even if they are empty because the contents can be modified with JS.

Answer 1

Have you tried using a col/colgroup approach (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col) and setting the width attribute?
You'd have something similar to this:
td {
border: 1px solid #000;
}
<table>
<tbody>
<col width="40px" />
<col width="20px" />
<tr>
<td>hi</td>
<td>hi</td>
</tr>
<tr>
<td>hi</td>
<td>hi</td>
</tr>
</tbody>
</table>
I think this is the way to go for your case.