1

colの要素を使用して、表のセルに最小幅を与えようとしていますcolgroup。は、幅が設定され ( で設定されたすべてのセルの合計幅よりも小さい)、が に設定さtableれた によってラップされます。divcoloverflowdivauto

ここに私のHTMLコードがあります -

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .table-block {
            border-spacing: 0;
            border-collapse: collapse;
        }

        .cell {
            padding: 5px 10px;
            border: 1px solid silver;
        }
    </style>
</head>
<body>
<div style="width:200px;overflow: auto">
    <table class="table-block">
        <colgroup>
            <col style="width:300px">
            <col style="width:300px">
        </colgroup>
        <tbody>
        <tr>
            <td class="cell"><em>2(0,2)</em></td>
            <td class="cell"><em>3(0,3)</em></td>
        </tr>
        <tr>
            <td class="cell"><em>2(0,2)</em></td>
            <td class="cell"><em>3(0,3)</em></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

私の問題は、セルが から幅を取らないことcolです。それは自分自身をラッパーに収めようとしていますdiv。セルが指定された適切な幅になり、スクロールバーが表示されるようにします。table幅を必要な合計幅に設定するという解決策があります。tableこれにより、JavaScript で新しい列を挿入するたびに幅を更新する必要があります。

私の解決策 -

<div style="width:200px;overflow: auto">
        <table class="table-block" style="width:600px">
        <!-- table things -->
</div>

それは正しいことですか？そして、なぜそれが起こるのですか？

jsFiddleリンク

4

1 に答える 1

0

ここでの問題は、最終的にテーブルのデフォルトがコンテナの 100% の幅であり、その内部要素がコンテンツによって強制されない限り、これを超えることができないことだと思います。trまたはtdテーブルの幅より大きい幅を指定しようとすると、同じことが起こります。

あなたの修正は、私が行う方法とほぼ同じです。私が行う唯一の変更は次のとおりです。

<div style" ... overflow-x:scroll; overflow-y:hidden;">

これにより、古いバージョンの IE ではスクロール バーが横に表示されなくなります。

もちろん、これは、テーブルを水平方向にスクロールしたいだけだと仮定しています。

于 2013-02-19T09:49:55.307 に答える