CSS table with double border [duplicate]

Question

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

I use the above code that creates a table with a 1 pixel black border around it which works fine, but I am trying to make it have another 1 pixel red border below it, for example:

I tried border: 1px double #000000 #FF0000; but it doesn't seem to work.

How can I achieve such style?

Answer 1

You can use box-shadow along with the 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>

Or use outline.

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

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