【css】コンテンツの幅に依存させたテーブルの作り方

<table>
  <tbody>
    <tr>
      <td>ヘッダー1</td>
      <td>ヘッダー1</td>
      <td>ヘッダー2</td>
      <td>ヘッダー3</td>
      <td>ヘッダー4</td>
    </tr>
    <tr>
      <td>ラベル1</td>
      <td>データ1-1</td>
      <td>データ2-1データ2-1データ2-1データ2-1</td>
      <td>データ3-1</td>
      <td>データ4-1</td>
    </tr>
    <tr>
      <td>ラベル2</td>
      <td>データ1-2</td>
      <td>データ2-2データ2-2データ2-2データ2-2データ2-2データ2-2データ2-2</td>
      <td>データ3-2</td>
      <td>データ4-2</td>
    </tr>
    <tr>
      <td>ラベル3</td>
      <td>データ1-3</td>
      <td>データ2-3データ2-2データ2-2データ2-2<br>データ2-2データ2-2データ2-2データ2-2データ2-2</td>
      <td>データ3-3</td>
      <td>データ4-3</td>
    </tr>
  </tbody>
</table>

table {
  table-layout: fixed;
  width: 100%;
  overflow-x: auto;
}

tr {
  width: max-content;
}

td {
  width: max-content;
  white-space: nowrap;
}