ダブルボーダーのCSSテーブル

Question

table { 
    border: 1px solid #000000; 
    border-collapse: collapse; 
} 

周囲に1ピクセルの黒い境界線があるテーブルを作成してうまく動作しますが、その下に別の1ピクセルの赤い境界線があるようにしようとしています：

は私がborder: 1px double #000000 #FF0000;を試みたが、動作するようには思えません。

どのようにこのようなスタイルを実現できますか？

Answer 1

borderと一緒にbox-shadowを使用できます。

table { 
 
    border: 10px solid red; 
 
    box-shadow: 0 0 0 10px black; 
 
}

<table> 
 
    <tr> 
 
    <td>123</td> 
 
    <td>456</td> 
 
    <td>789</td> 
 
    </tr> 
 
</table>

またはoutlineを使用しています。

table { 
 
    border: 10px solid red; 
 
    outline: 10px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td>123</td> 
 
    <td>456</td> 
 
    <td>789</td> 
 
    </tr> 
 
</table>

Answer 2

divにテーブルをラップし、そこに黒い境界線を置きます。

div.table { 
 
    border: 1px solid #000; 
 
    display: inline-block; 
 
    padding: 1px; /*space between the borders*/ 
 
} 
 

 
div.table table { 
 
    border: 1px solid #F00; 
 
}

<div class="table"> 
 
<table> 
 
<tr><td>1</td><td>2<td></tr> 
 
</table> 
 
<div>

Answer 3

あなたは「二重の」国境をしたい場合は、それを3pxの幅を与えることをしようとは（それらの間のスペースのための各ラインと1ピクセルのための1ピクセル）

あなたのCSS必要がありますそのようになります。ここ

table { 
    border: 3px double #000000; 
    border-collapse: collapse; 
} 

フィドル：https://jsfiddle.net/captain_theo/umq1dj3t/

EDIT：異なる色の境界線が必要な場合は、テーブルをコンテナに追加してみます。フィドル：https://jsfiddle.net/captain_theo/xp8bt8k2/

Answer 4

あなたはこれを試すことができます！

table{ 
 
    border: 1px solid red; 
 
    border-collapse: collapse; 
 
    outline: 1px solid blue; 
 
}

<table> 
 
<tr> 
 
<td>a1</td> 
 
<td>a2</td> 
 
</tr> 
 
<tr> 
 
<td>b1</td> 
 
<td>b2</td> 
 
</tr> 
 
<tr> 
 
<td>c1</td> 
 
<td>c2</td> 
 
</tr> 
 
</table>