带双边框的CSS表

Question

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

我使用上面的代码创建了一个表格，周围有一个1像素的黑色边框，工作正常，但我试图让它下面有另一个1像素的红色边框，例如：

我尝试border: 1px double #000000 #FF0000;，但它似乎无法运作。

我怎样才能达到这种风格？

Answer 1

将表格包裹在div中并将黑色边框放在那里。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

当你想要一个＆＃34; double＆＃34;边框，尝试给它一个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 3

您可以将box-shadow与border一起使用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或使用outline。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以试试这个！

＆＃13;

＆＃13;

demo@ubuntu:~$ sudo /etc/init.d/mysql restart
[....] Restarting mysql (via systemctl): mysql.serviceJob for mysql.service failed because the control process exited with error code.
See "systemctl status mysql.service" and "journalctl -xe" for details.
 failed!
demo@ubuntu:~$

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;