There is a wide table with table-layout: fixed. I'm trying to figure out how the width: min-content property should work for a cell of this table.
table {
table-layout: fixed;
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
.min {
width: min-content;
}
<table>
<thead>
<tr>
<th class="min">Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>X</td>
<td>Y</td>
</tr>
</tbody>
</table>
I get the desired result in Firefox, but not in Chrome. Is this a Chrome bug or am I doing something wrong?
If it's a Chrome bug, what's the workaround for getting the minimum width of the first column, given that I want to use table-layout: fixed and don't want to look for a fixed cell width like width: 30px?