0

テーブルの各列をページの幅の 25% にしようとしています。4 つ以上の列がある場合、テーブルを水平方向にスクロールして他の列を表示できるようにしたいと考えています。

そのため、すべてのセルの幅を固定ピクセル数 (固定ページ幅の 25% に相当) に設定しました。overflow-xそして、両方scrollに設定してみましautoた。ただし、どちらの場合も、テーブルの幅がページの幅を超えないように、列の幅が圧縮されています。

私のセル幅は完全に無視されているようです! 列の幅を尊重し、それらを収容するのに十分な幅にテーブルを拡大できるようにブラウザに指示するにはどうすればよいですか?

注: ASP.NET MVC を使用してプログラムでページを作成しています。何列になるかは前もってわかりません。しかし、HTML を作成しているときに、列の数を知っています。

4

1 に答える 1

1

問題を考えると：

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-widthtd

#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です。したがって、サポートする必要がある場合は、何かをシムする必要があります。しかし、それ以外の場合は、これでうまくいくはずです。

于 2012-09-29T15:00:14.980 に答える