Spacing between specified columns in the table without creating <td> a false

Question

I am looking for a solution to leave a predetermined space between columns of my table, without resorting to the use of <td> or <th> phony (without anything written, just with a padding style).

The desired is to place spaces of 5px between the main columns (TITLE HERE, TITLE 1 and TITULO2)

Follows the Code:

http://jsfiddle.net/jb2sgmjb/

.P_fixa  {
    border-collapse:collapse;
    border-spacing:0;
    width: 100%;
    vertical-align: middle;
    font-family: sans-serif;

}
.P_fixa td { }

.P_fixa th { 
    }

.P_fixa .branco {
    width:2%;}

.P_fixa .submenu_titulos {
    width:40%;

    text-align:center;
    background-color: grey;
    color:white;
    font-size: 13px;
    font-weight: bold;

}
.P_fixa .submenu_cabecalhos {
    font-size: 11px;
    background-color: rgb(218,238,243);
    color:black;
    font-weight: bold;
    border-bottom: dotted 1px grey;
}
.P_fixa .submenu_cabecalhos .centro {
    text-align: center;
}
.P_fixa .submenu_cabecalhos .esquerda {
    text-align: left;
}

.P_fixa .menu_geos {
    padding: 2px;
    text-align:center;
    color:black;
    width:10%;
    font-size: 13px;
    font-weight: bold;
    background-color: blue;
}
.P_fixa .menu_filias {
    text-align:center;
    color:black;
    background-color: rgb(146,205,220);
    font-size: 12px;
}
.P_fixa .resultados {
    font-size: 11px;
    color: black;
}
.P_fixa .resultados .centro {
    text-align: center;
}
.P_fixa .resultados .esquerda {
    text-align: left;
}

.P_fixa .resultados  td {
    border-bottom: dotted 1px grey;
    border-top: dotted 1px grey;
    border-left:dotted 1px grey;
}

html

<table class="P_fixa">
  <tr>
    <th class="submenu_titulos" colspan="4" rowspan="2">TITULO AQUI espaço -></th>
    <th class="menu_geos" colspan="2">TITULO 001</th>
    <th class="menu_geos" colspan="2">TITULO 002</th>



  </tr>
  <tr class="menu_filias">
    <td colspan="2">SUBTITULO 001</td>
    <td colspan="2">SUBTITULO 002</td>




  </tr>
  <tr class="submenu_cabecalhos">
    <td class="esquerda">CABEÇALHO</td>
    <td class="esquerda">CABEÇALHO</td>
    <td class="esquerda">CABEÇALHO</td>
    <td class="centro">CABEÇALHO</td>
    <td class="centro">CABEÇALHO</td>
    <td class="centro">CABEÇALHO</td>
    <td class="centro">CABEÇALHO</td>
    <td class="centro">CABEÇALHO</td>
  </tr>
</table>

Answer 1

You can do this using the following "Hack":

th {
    border: 5px solid transparent;
    background-clip: padding-box;
}

You could just use the border: 5px solid; and add a color to it, but let’s say that in the future you want to change the background color of the body or even of table and then you would also have to change the color of the border every change you make in the color scheme.
You could also apply a transparent border to it, but once you add a background color to the element, the transparent border will no longer be noticeable.

This is where the background-clip: padding-box; enters and makes the trick of having a transparent border and still have the desired space without interfering in the color scheme.

Here are 2 examples:
With a background with a light color - http://jsfiddle.net/mopsc2qe/
And with a background with a dark color - http://jsfiddle.net/mopsc2qe/1/

You can read more about the property background-clip in: CSS3 background-clip Property

Answer 2

I believe with an edge you can do it like this:

border-right: 5px;
border-right-color: white;
border-right-style: groove;

In my test I put here:

.P_fixa .submenu_titulos {
    width:40%;
    border-right: 5px;
    border-right-color: white;
    border-right-style: groove;
    text-align:center;
    background-color: grey;
    color:white;
    font-size: 13px;
    font-weight: bold;
}