【CSS】<table>の横幅を100%にしつつ項目は左寄せにしたい

Question

前提・実現したいこと

<table>の横幅を100%にしつつ、各<td>の項目は左寄せ、文字数に応じて右側の余白が縮む。
これを全て満たしたいのですが、CSSだけで実現可能でしょうか？（jsで幅取得して...はやりたくない）

イメージ

文字数少ない時

文字数多い時

該当のソースコード

<table>
  <thead>
    <th></th>
    <th>氏名</th>
    <th>TEL</th>
    <th>携帯</th>
  </thead>
  <tbody>
    <tr>
      <td>契約者名</td>
      <td>東野啓介</td>
      <td>090-8757-3647</td>
      <td>090-3839-2981</td>
    </tr>
    <tr>
      <td>入居者名</td>
      <td>東野啓介</td>
      <td>090-8757-3647</td>
      <td>090-3839-2981</td>
    </tr>
    <tr>
      <td>貸主名</td>
      <td>東野啓介</td>
      <td>090-8757-3647</td>
      <td>090-3839-2981</td>
    </tr>
  </tbody>
</table>

試したこと

空の<td>を、各<tr>の一番最後に追加して、その<td>のwidthを100%にする。
↓
氏名などの<td>が横に潰れた（１文字分のwidthになった）
↓
<table>にwhite-space: nowrapをつけたらいい感じになった
↓
が、文字数が画面幅より大きくなると、画面外へ貫通してしまう（これで折り返してくれれば成功だった）

Answer 1

テーブルレイアウトをあきらめてグリッドレイアウトで解決するのはどうでしょうか。
サンプルを置いておきます。

https://jsfiddle.net/Lhankor_Mhy/kf35zc2b/

table{
  width:100%;
  display: grid;
  grid-template-columns: auto auto auto 1fr;
}
thead,tbody,tr{
  display:contents;
}

Comments

[true_colors_20]

gridはこのような使い方もできるのですね。ためになりました。ありがとうございます。