4

タイトルにあるように、overflow: hidden を使用すると、テーブルの境界線がテーブルで切り取られます。たとえば、以下のコードを参照してください。

    <style>
        table {
            border-collapse: collapse;
        }

        table {
            border: 1px solid black;
            overflow: hidden;
        }

    </style>

    <body>
        <table>
            <thead>
                <tr>
                    <th>header 1</th>
                    <th>header 2</th>
                    <th>header 3</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>side header</th>
                    <td>data 1</td>
                    <td>data 2</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>footer header</th>
                    <td>footer 2</td>
                    <td>footer 3</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

例を最小限に単純化しました。これを修正するボーダー折りたたみスタイルを失う可能性がありますが、そのスタイルが必要です。私のコードはそれがないと厄介になります。

暫定的な解決策として、以下の css を使用してハッキングできることがわかりましたが、私はハッキングのハグファンではありません!

.borderhack:after {
            content: '\00a0';
            position: absolute;
            border: 1px solid black;
            left: -2px;
            top: -2px;
            width: 100%;
            height: 100%;
            z-index: -10;
        }

        table {
            position: relative;
        }

これに対する説明またはより良い解決策をいただければ幸いです。数日間の調査の後、実際にこれを行っている理由を知りたいと思っています。

ありがとう

4

4 に答える 4

5

2 つの簡単な解決策があります。

  1. 2 ピクセルの境界線幅を使用します。
  2. ボーダーの代わりにアウトラインを使用します。

例えば：

table {
  border-collapse: collapse;
  border: 2px solid black;
  overflow: hidden;
}

また

table {
  border-collapse: collapse;
  outline: 1px solid black;
  overflow: hidden;
}

http://jsfiddle.net/6NVtS/1/

それが起こる理由は、テーブルの境界線の折りたたまれた境界線モデルを使用するときに、ブラウザが境界線を中央で分割しようとしているからだと思います。1 ピクセルの外側の境界線では明らかにそれは不可能であるため、ブラウザは上/左の場合は全ピクセル幅を使用し、下/右の場合は何も使用しません。この動作は標準のどこかにあるのかもしれませんが、私はそこまで見ていませんでした。しかし、これの内部では、幅を2倍にせずに境界線を正しく塗りつぶします。これは、おそらくブラウザが生成するが、技術的には右に半ピクセル移動するため、下と右を切り取っているのは外側とoverflow:hiddenの組み合わせです。要素の領域の「外側」にあります。それが理にかなっていることを願っています。オーバーフローによってアウトラインが切り取られていません - 理由はわかりませんが、例外を予測できませんでした。

http://www.w3.org/TR/CSS21/tables.html#collapsing-borders

別の解決策は、テーブルの代わりに td と th にオーバーフローを適用するか、オーバーフローを設定する必要があるかどうかを確認することです。

于 2013-06-15T02:50:16.220 に答える
0

Skrivener とさらなる調査のおかげで、私はこれを理解することができました。ここで解決策を参照してください。

問題- テーブルの境界線の周囲で境界線の崩壊が等しくない:

.table1 {

    border          : 3px solid black;
    overflow        : hidden;
    border-collapse : collapse;
}

解決策- 境界線の幅を宣言してはborderいけませんborder-width:

.table2 {

    border          : solid black;
    overflow        : hidden;
    border-collapse : collapse;
    border-width    : 6px 7px 7px 6px;
}

th {

    border: 1px solid black;
}

th {

    border: 1px solid black;
}

問題：

<table class="table1">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>side header</th>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer header</th>
            <td>footer 2</td>
            <td>footer 3</td>
        </tr>
    </tfoot>
</table>

解決：

<table class="table2">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>side header</th>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer header</th>
            <td>footer 2</td>
            <td>footer 3</td>
        </tr>
    </tfoot>
</table>

スクライブナー:

「それが起こる理由は、テーブルの境界線の折りたたまれた境界線モデルを使用するときに、ブラウザーが境界線を中央で分割しようとしているからだと思います。境界線の外側の 1 ピクセルでは明らかにそれは不可能であるため、ブラウザーは使用しています。上/左の場合は全ピクセル幅、下/右の場合は何もありません。」

これにより、4 つの境界線の設定border-widthを手動で設定し、右と下に 1px を追加するだけで、丸めが正しく機能すると信じることができました。解決策を参照してください。境界線を更新して、正しく機能することを確認できます。右と下の境界線に 1px を追加する限り、外枠の幅を同じにすることができます。

すべての助けをありがとう！

于 2013-06-15T03:41:54.167 に答える
0

border-collapse折りたたむ境界線がない場合に使用する意味は何ですか? を外せborder-collapseば大丈夫です。

ここで実際の例を参照してください: http://jsfiddle.net/86xST/

于 2013-06-15T02:30:57.123 に答える