Space between specific columns in the table without creating a false td

Navigation
3

I'm looking for a solution to leave a pre-determined space between columns in my table, without using <td> or <th> false (with nothing written, only with a style padding).

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

Follow the Code:

link 

.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>
    
asked by anonymous 27.10.2015 / 15:20

2 answers

2

You can do this using the following "Hack": 

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

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

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

Here are 2 examples:
With a background with a light color - link
And with a background with a dark color - link

  

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

    
27.10.2015 / 16:09
1

I believe that with a border you can do it like this: 

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

In my test I put it 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;
}

    
27.10.2015 / 15:33
What is the correct MIME type? Survey package and counting