Как выровнять заголовки в сетке с телом?

Question

У меня есть следующие html и css. Я хочу добиться динамического числа столбцов в таблице ниже. Но заголовки в сетке имеют не ту же ширину, что и столбцы других строк. Есть идеи? спасибо!

table.list {
  border-collapse: collapse;
  width: 100%;
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: minmax(200px, max-content);
}

thead {
  font-weight: bold;
}

th {
  padding: 4px;
}

tbody {
  overflow: auto;
}

tr {
  line-height: 1.5;
  border: none;
  border-collapse: none;
  min-height: 40px;
}

tr:nth-child(2n) td {
  background-color: red;
}

tr:hover td {
  background-color: pink;
}

td {
  min-height: 40px;
  padding: 4px;
  text-align: left;
  border: 1px solid black;
}

<table class="list" role="grid">
  <thead>
    <tr role="row">
      <th role="columnheader">Date</th>
      <th role="columnheader">Action</th>
      <th role="columnheader">Comment</th>
      <th role="columnheader">Text</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td role="gridcell">Mar 20</td>
      <td role="gridcell">Some action</td>
      <td role="gridcell">asdasdsadasdsa</td>
      <td role="gridcell">Some more text </td>
    </tr>
    <tr role="row">
      <td role="gridcell">Mar 14</td>
      <td role="gridcell">Some action</td>
      <td role="gridcell">asdasdsadsadsadsa</td>
      <td role="gridcell">Some more text</td>
    </tr>
  </tbody>
</table>

Answer 1

Вам действительно нужно использовать сетку CSS? Использование таблиц HTML и сетки CSS кажется для меня немного избыточным.

Если нет, просто удалите display: grid; из table.list в вашем CSS, и это решит проблему.

table.list {
  border-collapse: collapse;
  width: 100%;
  grid-auto-flow: row;
  grid-auto-columns: minmax(200px, max-content);
}

thead {
  font-weight: bold;
}

th {
  padding: 4px;
}

tbody {
  overflow: auto;
}

tr {
  line-height: 1.5;
  border: none;
  border-collapse: none;
  min-height: 40px;
}

tr:nth-child(2n) td {
  background-color: red;
}

tr:hover td {
  background-color: pink;
}

td {
  min-height: 40px;
  padding: 4px;
  text-align: left;
  border: 1px solid black;
}

<table class="list" role="grid">
  <thead>
    <tr role="row">
      <th role="columnheader">Date</th>
      <th role="columnheader">Action</th>
      <th role="columnheader">Comment</th>
      <th role="columnheader">Text</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td role="gridcell">Mar 20</td>
      <td role="gridcell">Some action</td>
      <td role="gridcell">asdasdsadasdsa</td>
      <td role="gridcell">Some more text </td>
    </tr>
    <tr role="row">
      <td role="gridcell">Mar 14</td>
      <td role="gridcell">Some action</td>
      <td role="gridcell">asdasdsadsadsadsa</td>
      <td role="gridcell">Some more text</td>
    </tr>
  </tbody>
</table>