HTMLテーブルを100％幅にするにはどうしたらいいですか？

Question

私はこのグリッドを持っている：

私はautoに100％からテーブルの幅を変更すると、テーブルが水平方向に崩壊します。望ましくない

。テーブルの列（td要素）を内容に合わせて自動的に縮小するにはどうしたらいいですか？同時に、table要素とtr要素は親の空間全体を満たしますか？

Answer 1

table要素とtr要素は、親の空間全体を埋めますか？

<table>と<tr>要素は、それらの内部<td>要素と同じ幅です。 <td>の内容はすべて、内容がとと小さくても、その表はその内部のセルと同じ幅にしかできないため、利用可能な領域と同じ幅になります。

（つまり、ほとんどのHTML要素とは異なり、<table>要素は、その内容から独立してサイズにすることができません。）

あなたはそれを100%の幅を与えることによって、しかしできるだけ広くなる1つのセルを設定することができます。

<table style="width: 100%; background: grey; color: white;"> 
    <tr> 
     <td style="background: red;">Content</td> 
     <td style="background: green;">Content</td> 
     <td style="background: blue; width: 100%;">Content</td> 
    </tr> 
</table> 

は良いヒントのhttp://jsfiddle.net/9bp9g/

Answer 2

<td>の幅は、<td>の幅で最初に<tr>に定義されます。

そうしないと、あなたは次のように<td>幅のルールを定義するためにCSSを使用することができます、どのようにすると同時に、テーブルの列（TD要素）は、その内容に合わせて自動的に縮小することができます

.myform tr td{padding:0px;margin:0px;} 
.myform td{width:200px;}