問題を考えると:
body {
width: 100%;
}
#percent {
width: 100%;
}
#percent td {
width: 25%;
background: #cdd;
}
<p>Percent only</p>
<table id="percent">
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/userdude/3SKwP/
テーブルの幅はbody
要素の幅を超えることはありません。これは、両方が の相対量に設定されているためです100%
。
width
オーバーフローを強制するために定義された a の欠如を補うために、要素でbody
使用できます。min-width
td
#percent,
#fixed {
width: 100%;
}
#percent td,
#fixed td {
width: 25%;
background: #cdd;
}
#fixed td {
min-width: 150px;
}
<p>min-width: 150px</p>
<table id="fixed">
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/userdude/3SKwP/1/
これの欠点は、IE7 がサポートしていないことmin-width
です。したがって、サポートする必要がある場合は、何かをシムする必要があります。しかし、それ以外の場合は、これでうまくいくはずです。