带有双边框的CSS表格[重复]答案

【问题标题】：CSS table with double border [duplicate]带有双边框的CSS表格[重复]
【发布时间】：2017-02-26 21:22:01
【问题描述】：

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

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

我尝试了border: 1px double #000000 #FF0000;，但它似乎不起作用。

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

【问题讨论】：

检查this和this和this和this

标签： html css html-table

【解决方案1】：

将表格包裹在一个 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>

【讨论】：

【解决方案2】：

您可以将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>

【讨论】：

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：