Using min-content width with fixed layout table

Viewed 53

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?

0 Answers
Related