双边框CSS表

Question

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

我使用的创建与它周围的1个像素的黑色边框，工作正常的表上面的代码，但我想使它低于它的另一个1个像素的红色边框，例如：

我试图border: 1px double #000000 #FF0000;但似乎并没有工作。

我该如何达到这样的风格？

Answer 1

您可以使用box-shadow以及border。

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宽（1px的每一行和1px的它们之间的空间）

你的CSS应该看起来像：

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

小提琴这里：https://jsfiddle.net/captain_theo/umq1dj3t/

编辑：如果您想要不同的颜色边框，请尝试将表格添加到容器中。小提琴在这里：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>