html - 含まれているデータと同じくらい狭いテーブル列幅？

Question

3つの列があります。最後の2つは、含まれているデータと同じくらい狭くしたいと思います。最初の列は残りの幅を取ることができます（テーブルの幅は100％です）。

CSSを使用してこれをどのように行うことができますか？現在、右側の列は余分なスペースがあり、ばかげているように見えます。アイデア？

Answer 1

最初の列にawidthを100%指定し、必要に応じて他のすべての列のセルにawhite-space: nowrapを指定して、コンテンツがラップされないようにします（ここでも必要な場合のみ）。

例えば

<table>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
    <tr><td class="first">first</td><td>second</td><td>third</td></tr>
</table>

と

table { width: 100%; }
table td.first { width: 100%; }

または、IE6ユーザーを気にしない場合の最新の方法：

table { width: 100%; }
table td:first-child { width: 100%; } 

（削除できるようにclass="first"）

Answer 2

^{私は、基本的に、同様の質問でこのより詳細な回答を使用して、少し異なるアプローチでこれに回答しました。}

shrinkできるだけ狭くしたい列にクラスを追加します

<table>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
</table>

このcssで：

td.shrink {
  white-space: nowrap;
  width: 1px;
}

これにより、1つの行の幅が最小になるように複数の列を定義できますが、他の列の幅は動的なままです（改行の可能性を含む）。

スニペットの例

table {
  width: 100%;
}

td {
  padding: 10px;
}

td.shrink {
  white-space: nowrap;
  width: 1px;
}

<table>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
    <tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
</table>