3

Estou procurando uma solução para deixar um espaço pré-determinado entre colunas da minha tabela, sem recorrer ao uso de <td> ou <th> falso (sem nada escrito, só com um estilo de padding).

O desejado é colocar espaços de 5px entre as colunas principais (TITULO AQUI, TITULO 1 e TITULO2)

Segue o Código:

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>

2 Respostas 2

2

Podes fazer isso utilizando o seguinte "Hack":

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

Podias simplesmente utilizar o border: 5px solid; e adicionar-lhe uma cor, mas digamos que no futuro queres modificar a cor de fundo do body ou mesmo da table e então terias que alterar também a cor da borda a cada alteração que fizeres no esquema de cores.
Podias também lhe aplicar uma borda transparente, mas assim que adicionares uma cor de fundo ao elemento, a borda transparente deixará de se notar.

É aqui que o background-clip: padding-box; entra e faz o truque de termos uma borda transparente e mesmo assim termos o espaço desejado sem que interfira no esquema de cores.

Aqui tens 2 exemplos:
Com um background com uma cor clara - http://jsfiddle.net/mopsc2qe/
E com um background com uma cor escura - http://jsfiddle.net/mopsc2qe/1/

Podes ler mais sobre a propriedade background-clip em: CSS3 background-clip Property

1

Acredito que com uma borda você consegue fazer isso assim:

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

No meu teste eu coloquei aqui:

.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;
}

Exemplo de borda

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .