1

問題は、すべての要素 (メイン コンテナー、テーブル コンテナー、およびテーブル自体) の高さが 100% でな​​ければならないことです。テーブル自体のサイズは、Firefox よりも Chrome と IE の方がわずかに小さいため、.table-container とテーブルの境界線の間に小さなギャップが生じます。

誰かがこれを修正する方法を知っていますか? 私はこれにほぼ一日を費やしましたが、単純に解決策を見つけることができません。どんな助けにも感謝します。

これが私の現在の問題をフィドルするためのリンクです：フィドルリンク

<div class="container">
    <div class="buttons">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                    <td>d</td>
                </tr>
                <tr>
                    <td>aa</td>
                    <td>bb</td>
                    <td>cc</td>
                    <td>dd</td>
                </tr>
                <tr>
                    <td>aaa</td>
                    <td>bbb</td>
                    <td>ccc</td>
                    <td>ddd</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

およびCSS:

html, body, .container, .table-container, table
{
    height: 100%;
}

.container
{
    display: block;
    width: 500px;
    margin: 0 auto;
    text-align: center;
}

.table-container
{
    width: 100%;
    border: 1px solid red;
    padding-top: 30px;
    margin-top: -30px;
}

.buttons
{
    height: 30px;
}

.buttons div
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 25%;
    float: left;
    height: 30px;
    border: 1px solid black;
}

table
{
    border: 1px solid black;
    width: 100%;
    border-spacing: 0;
}

thead td, tbody td
{
    width: 25%;
    height: 25%;
}

更新:
.table -container のパディングと負のマージンを追加しました。更新 2:例に border-spacing と border-collapse を追加しました。まだ正常に動作していません。
Update3 : ここで機能するようになりました。つまり、バグを完全に再現して表示することができませんでした:(しかし、一般的に問題は、Chrome の 5x5 テーブルの高さが 22px の FF よりも小さいことです。テーブル コンテナとテーブル自体の間のギャップは 22 ピクセルです.各セルは約 4 ピクセル + Firefox のテーブルの高さにあります.

4

3 に答える 3

1

を注意

width: 100%;

とまったく同じようには機能しません

height: 100%;

します。

width: 100% は、親の幅が明示的に設定されていなくても、親の幅の 100% を取得しますが、height: 100% は、親の高さが固定されている要素に対してのみ機能します。

簡単に言えば、%-width は動的に適用され、%-height は静的な親コンテナーの高さに適用されます。

于 2014-06-16T19:22:18.670 に答える
1

テーブルの境界線の間隔のようです。

この CSS を table 要素に適用します。

border-spacing: 0;
于 2013-04-23T12:34:26.670 に答える