7

tr > td要素の二重境界線を防ぐことができるかどうかを知りたいです。私が使用するborder:1px solid #DDDと、最初の要素にはすべての境界線があり、次に2番目の要素にも境界線がありますが、最初の要素には右の境界線があり、2番目の要素には左の境界線があるため、境界線は二重になり、最初の要素がある2番目のtrでも同じことが起こりますborder-bottom と second には border-top があります。任意のヒント？この投稿を見ましたが、これは DIV 用であり、テーブルを使用しているため、うまくいきません。

4

3 に答える 3

19

皮切りに：

border-collapse:collapse;

必要に応じて調整します。:first-childおよび疑似セレクターを使用すると:last-child、一方の端でデフォルトのスタイリングを変更できます。

于 2012-09-14T16:14:12.967 に答える
5

セルに境界線を付ける代わりに、テーブル自体の背景色を境界線にしたい色に設定してから、セルの間隔を 1px にします。

HTML:

​<table>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
    <tr>
        <td>Four</td>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>

CSS:

table {
    background: #ccc;
    border-spacing: 1px;
}
td {
    background: #fff;
    padding: 5px;
}

それはあなたにこれを与えるでしょう：

セル間隔の例

セル自体にも背景色を設定する必要があることに注意してください。そうしないと、テーブルの背景色が透けて見えます。

于 2012-09-14T16:34:23.580 に答える
4

あなたはボーダー崩壊を探しています

CSS の border-collapse プロパティは、テーブルの境界モデルを選択します。これは、テーブル セルの外観とスタイルに大きな影響を与えます。

値はそのままです。

border-collapse:  collapse | separate | inherit
于 2012-09-14T16:15:19.267 に答える