4
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:

enter image description here

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

How can I achieve such style?

Stickers
  • 75,527
  • 23
  • 147
  • 186
darkchampionz
  • 1,174
  • 5
  • 24
  • 47
  • 2
    Check [this](http://stackoverflow.com/questions/3906983/css-two-color-borders) and [this](http://stackoverflow.com/questions/14735569/css-double-border-2-colors-without-using-outline) and [this](http://stackoverflow.com/questions/19463904/css-double-border-with-different-color) and [this](http://stackoverflow.com/questions/19299006/multi-colored-border-repeating-possible-with-css) – Matheus Avellar Feb 26 '17 at 21:26

4 Answers4

2

Wrap the table in a div and put the black border there.

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>
pol
  • 2,641
  • 10
  • 16
2

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>
Stickers
  • 75,527
  • 23
  • 147
  • 186
1

When you want a "double" border, try to give it a width of 3px (1px for each line and 1px for the space between them)

Your css should look like that:

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

Fiddle here: https://jsfiddle.net/captain_theo/umq1dj3t/

EDIT: if you want different color border, try to add the table into a container. Fiddle here: https://jsfiddle.net/captain_theo/xp8bt8k2/

Theo Orphanos
  • 1,417
  • 1
  • 19
  • 27
1

You can try this! 

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>
Diana Ysabel
  • 106
  • 11