web-dev-qa-db-ja.com

内容に応じて表のセルを縮小する方法は？

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％」などを設定できません。

htmlcsshtml-tablewidth
42
Pavel S.

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

HTML：

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

CSS：

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

this fiddle outを確認してください。

43
scumah

これは何年も前に尋ねられたことを知っています。 OPはおそらくこれまでに解決しているでしょう。しかし、これはまだ誰かに役立つ可能性があります。だから私は私のために働いたものを投稿しています。これが私がやったことだ。幅をゼロに近い値に設定して縮小し、空白をnowrapに設定します。解決しました。

td {
width:0.1%;
white-space: nowrap;
}
32
Nat Julian Belza

これを設定します。

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

これで問題が解決します。

4
Shubham Nigam

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

2
Filipe Manuel