html - 2 番目の Html テーブル セルが画面の残りの部分にまたがる

Question

2 列 1 行のテーブルがあり、画面の幅は 100% です。最初の列は、その中のコンテンツがいっぱいになるのと同じくらい多くのスペースを占めるようにしたい. このコンテンツは画面全体を占めるべきではないため、ラッピングについて心配する必要はありません。次に、2 番目のセルが残りの水平スペースを占有するようにします。

このテーブルを設定するにはどうすればよいですか? 2 つのセルの幅を無駄に設定するさまざまな組み合わせを試しました。

Answer 1

次のように CSS を設定します。

table {
  width: 100%;
}

td.firstCol {
  width: 1%;
  white-space: nowrap;
}

そして、あなたのテーブルマークアップは次のようになります:

<table>
  <tr>
    <td class="firstCol">
      First column content
    </td>
    <td>
      Second column content
    </td>
  </tr>
</table>

そして、それはうまくいくはずです。