html - 内容に応じてテーブルセルを縮小するにはどうすればよいですか？

Question

2列（セル）のテーブルを次のようにするにはどうすればよいですか？

• 最初のセルは内容に応じて縮小されます
• もう一方のセルは、テーブルの残りの部分に適合します（両方の内容を合わせた幅よりも広い）

例：

<table style="width: 500px;">
   <tr>
      <td>foo</td>
      <td>bar</td>
   </tr>
</table>

次のようなテーブルが必要です。

.___________________________________________________________________________.
| foo | bar            <a lot of space here>                                |
|_____|_____________________________________________________________________|
                           500 px total width

注意：「foo」の幅がわからないため、「50px」や「10％」などを設定できません。

Answer 1

幅をゼロに近い値に設定して縮小し、空白をnowrapに設定します。解決しました。

td {
width:0.1%;
white-space: nowrap;
} 

Answer 2

width2番目のセルのをに設定できます100%

HTML：

<table>
   <tr>
      <td>foo</td>
      <td class="grow">bar</td>
   </tr>
</table>​

CSS：

table { width: 500px; }
.grow { width: 100%; }​

このフィドルをチェックしてください。

Answer 3

これを設定します：

td {
    max-width:100%;
    white-space:nowrap;
}

これはあなたの問題を解決します。

Answer 4

テーブルの合計サイズが500ピクセルで合格しない場合は、td{max-width: 500px;};を入力します。最小値が500ピクセルの場合、td {min-width: 500px;}; この例を見てください。