0

この例を参照してください：

http://jsfiddle.net/qTjdX/

赤いborder-bottomを1本の実線で表示したいのですが、現在、黄色のborderが3つに分割されています。border-bottomを優先する方法はありますか？ある種のz-indexのように？

border-collapse：collapseとborder-collapse：separateの両方を試しました。

動作しているのは、赤い線を太くすることだけですが、同じ幅にしたいのです。

table { 
  width:100%;
  border:1px solid blue;
  border-collapse:separate;
}
th, td {
  border:1px solid yellow;
  padding:5px;
}
th {
  background:black;
  color:white;
}
th {
  border-bottom:1px solid red !important;
} 
td {
  background:#efefef;
}

</ p>

4

1 に答える 1

1

あなたが抱えている問題は、境界線が4つの別々の側面で構成されており、それらがさまざまな方法で丸みを帯びた角で45度の角度で交わっているためです。そのため、下の境界線を側面の色とは異なる色にすると、常に境界線が壊れます。

このデモを見ると：

div {
    float: left;
    border-width: 25px;
    border-style: solid;
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
}

JSフィドルデモ。

ピクセルを細分化できないため、さまざまな境界線がどのように交わるかを確認できます。これにより、コーナーピクセルが片側と同じ単色になり、色が異なる場合は反対側に異なる色になります。それが接続する。

あなたが本当に持っている唯一のオプションを補うために：内にネストされた要素を使用することですth：

<table cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th><div>col 1</div></th>
            <th><div>col 2</div></th>
            <th><div>col 3</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

次のCSSを使用します。

table { 
    width:100%;
    border:1px solid blue;
    border-collapse:collapse;
}

th {
    border-bottom: 2px solid yellow;
}

th div, td {
    border: 1px solid red;
}

th div {
    border-bottom-width: 0;
}

JSフィドルデモ。

于 2012-10-30T16:41:10.930 に答える