どのように左/右の境界線の代わりに上/下の境界の色を

Question

テーブルセルの境界線の角を与えるにはdiv（または私の場合はth）レンダリングの角のピクセルは、コーナーの2つの隣接する辺が異なる色を持つとき？

私が重要なマークを付けても、コーナーは常に側面の色を取得するように見えます。しかし、コーナーピクセルに境界線の色を使用したいと思います。

次の例のように、最初の行に連続した黒い境界線を付け、醜い赤色のセルと表の残りの部分を単にグレーだけに分けます。

table { 
 
    border-collapse: collapse; 
 
    text-align: center; 
 
} 
 

 
table tr td { 
 
    border: 8px solid grey; 
 
} 
 

 
table tr:first-child { 
 
    border: 8px solid black; 
 
} 
 

 
table tr th:not(:last-child) { 
 
    border-right: 8px solid red; 
 
} 
 

 
table tr:not(:first-child) td { 
 
    border-top: 0; 
 
}

I want: 
 
<table> 
 
    <tr> 
 
    <th> black-bordered </th> 
 
    <th> row </th> 
 
    <th> separated </th> 
 
    <th> with </th> 
 
    <th> reds </th> 
 
    </tr> 
 
    <tr> 
 
    <td> everything </td> 
 
    <td> below </td> 
 
    <td> it </td> 
 
    <td> simply </td> 
 
    <td> grey </td> 
 
    </tr> 
 
</table>

私はまた、border-collapseを削除th sのtr要素と側の境界に境界線を与え、ゼロに（私はちょうど発見）border-spacingを設定しようとしました。しかし、trの境界線はまったく表示されず、テーブルの残りの部分が乱されます（これは修正可能です）。

Answer 1

pseudo elementで取得できます。row + bordersのサイズになります。次に、上下の枠線のみを再適用します。

table { 
 
    border-collapse: collapse; 
 
    text-align: center; 
 
} 
 

 
table tr td { 
 
    border: 8px solid grey; 
 
    border-top: none; 
 
} 
 

 
table tr:first-child { 
 
    border: 8px solid black; 
 
} 
 

 
table tr th:not(:last-child) { 
 
    border-right: 8px solid red; 
 
} 
 

 
table tr th { 
 
    position: relative; 
 
} 
 

 
table tr th::before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -8px; left: -8px; 
 
    width: calc(100% + 16px); height: 100%; 
 
    border-width: 8px 0; 
 
    border-color: black transparent; 
 
    border-style: solid; 
 
}

I want: 
 
<table> 
 
    <tr> 
 
    <th> black-bordered </th> 
 
    <th> row </th> 
 
    <th> separated </th> 
 
    <th> with </th> 
 
    <th> reds </th> 
 
    </tr> 
 
    <tr> 
 
    <td> everything </td> 
 
    <td> below </td> 
 
    <td> it </td> 
 
    <td> simply </td> 
 
    <td> grey </td> 
 
    </tr> 
 
</table>