2

次の表に、コンテナではなく、セルの幅を調整させたいと思います。

<div style='width: 700px; border: 1px solid red;'>
    <table border="1" style='table-layout: fixed;'><tbody>
        <tr>
            <th style="" colspan="3">Group 1</th>
            <th style="" colspan="5">Group 2</th>
            <th style="" colspan="4">Group 3</th>
        </tr>
        <tr>
            <th style="width: 62px;">A</th>
            <th style="width: 200px;">B</th>
            <th style="width: 62px;">C</th>
            <th style="width: 62px;">D</th>
            <th style="width: 62px;">E</th>
            <th style="width: 62px;">F</th>
            <th style="width: 62px;">G</th>
            <th style="width: 62px;">H</th>
            <th style="width: 62px;">I</th>
            <th style="width: 100px;">J</th>
            <th style="width: 62px;">K</th>
            <th style="width: 68px;">L</th>
        </tr>
    </tbody></table>
</div>

コンテナの幅は、セル幅の合計よりも狭くなっています。ここに水平スクロールバーを表示してもかまいませんが、テーブルの幅をコンテナより広くすることはできません。colspanとテーブルの合計幅を計算すると、それでうまくいきますが、セルの幅が「％」や「em」などの非ピクセル幅の場合はどうなりますか？その場合、静的ピクセル計算は機能しません。

現在の効果は次 ここに画像の説明を入力してください のとおりです。期待される効果は、テーブルの幅がコンテナdivの幅を超えることです。

ただし、幅をテーブルに直接設定することにも問題があります。セルに設定された幅は無視されます。例えば：

    <div style='width: 700px; border: 1px solid red;'>
    <table border="1" style='table-layout: fixed; width: 900px;'><tbody>
        <tr>
            <th style="" colspan="3">Group 1</th>
            <th style="" colspan="5">Group 2</th>
            <th style="" colspan="4">Group 3</th>
        </tr>
        <tr>
            <th style="width: 62px;">A</th>
            <th style="width: 200px;">B</th>
            <th style="width: 62px;">C</th>
            <th style="width: 62px;">D</th>
            <th style="width: 62px;">E</th>
            <th style="width: 62px;">F</th>
            <th style="width: 62px;">G</th>
            <th style="width: 62px;">H</th>
            <th style="width: 62px;">I</th>
            <th style="width: 100px;">J</th>
            <th style="width: 62px;">K</th>
            <th style="width: 68px;">L</th>
        </tr>
    </tbody></table>
</div>

効果は次 のとおりですここに画像の説明を入力してください 。2番目のセル（200pxである必要があります）は、1番目と3番目のセルと同じくらい狭いことに注意してください。

誰かがこの問題に光を当てることができますか？前もって感謝します。

4

3 に答える 3

3

cssを追加します：

th{
    min-width:50px; /*for instance*/
}
div{
    overflow-x:scroll;
}

style='table-layout: fixed; width: 1px;'テーブルから削除します

于 2013-03-06T02:56:50.993 に答える
0

テーブルの配置は絶対に受け入れられますか？

<table border="1" style="position:absolute;">

これは、divにテーブルが水平方向に含まれなくなるように機能します。ただし、もちろん、divにはテーブルが垂直方向に含まれなくなりました。ただし、divの高さを手動で指定することで、これを回避できます。

于 2013-03-06T02:51:37.133 に答える
0

Merijnの答えは、固定幅のセルの場合、わずかに微調整して機能します。

グローバルなthmin-widthを指定する代わりに、次のようにセルごとに指定します。

<th style="min-width: 62px; width: 62px;">A</th>
<th style="min-width: 200px; width: 200px;">B</th>
<th style="min-width: 62px; width: 62px;">C</th>

少なくともこのように、個々の幅は無視されず、コンテナよりも幅が広く、セルの幅が不規則なテーブルが作成されます。

于 2013-03-06T03:18:44.660 に答える