Question: I have a table wherein I need to put a border around a given row or rows with spacing between them.

I seem to be able to do one or the other.

I know I can use 

```
table { border-collapse: separate; border-spacing: 1em 0.5em; }

```

To get my spacing, but then the border won't show up with something like

```
tr.bordered { border: 1px solid blue; }

```

If I set `border-collapse: collapse`, the blue border shows. But then no spacing.

Am I missing something here?

EDIT: [JS FIDDLE here](http://jsfiddle.net/smlombardi/2nMcg/1/)

You can see, if you use "collapse", the border works but there is no space.

If you use "separate" you get spacing but no border.

Answer: 
Duplicate question here: [Style row or column rather than cells when border-collapse: separate](https://stackoverflow.com/questions/2035413/style-row-or-column-rather-than-cells-when-border-collapse-separate)

The recommendation is to use colspan to simulate a table row, and add a border to the table inside of the colspan.
you can try to draw an unblured shadow : **[DEMO](http://jsfiddle.net/2nMcg/3/)**

```
.bordered {
    box-shadow:0 0 0 1px black;
}

```

:( this works in FF , but ...

---

so , 
we can use `:first-child` and `:last-child` to draw borders from `td`s,

**[DEMO 2](http://jsfiddle.net/2nMcg/8/)**

---

```
.bordered td {
    border: 1px solid #000;
    border-left:none;
    border:right:none;
    padding:1em 0.5em;
    border-right:none;
}
.bordered td:first-child {
    border-left:1px solid #000
}
.bordered td:last-child {
    border-right:1px solid #000;
    border-left:none;
} 
table {
    border-spacing: 0;
}

```