3

Preciso desenhar uma tabela com a seguinte característica: Que cada linha possua uma margem-bottom de 8px.

O destaque em vermelho é a distância que se deve ter entre as linhas. inserir a descrição da imagem aqui

A questão é conseguir adicionar apenas onde desejo. O problema da combinação border-collapse: separate e border-spacing: 8px é que ele aceita apenas 2 parâmetros! (Assim, se eu aumentar o espaçamento da direita, o da esquerda também aumenta, e se eu adicionar espaçamento acima, automaticamente abaixo também ele adiciona.) E o ideal seria conseguir manipular apenas uma destas direções!

Obrigado!

2
  • 1
    Pelo que eu sei, com border-spacing você só vai conseguir esse resultado mesmo: cima e baixo / esquerda e direita. Você pode usar um tamanho baixo, por exemplo, 2px. Assim, quando renderizada a primeira e a última td vão ter um espaçamento quase imperceptível (os 2px), enquanto no meio terá um espaçamento de 4px (2px de cima + 2px de baixo). Não sei se consegui explicar bem. 5/03/2015 às 20:58
  • Compreendi o que você quis dizer sim. No entanto, infelizmente, não consegue atingir o objetivo final isto. Mas obrigado pela ajuda! 7/03/2015 às 18:26

4 Respostas 4

5

Uma solução bem melhor que a minha anterior: use o border-spacing, e compense os efeitos colaterais mexendo na posição da tabela e nas bordas esquerdas das células (ou nas direitas, tanto faz):

div {
  border: 1px solid red;
}

table {
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-top: -8px;
}

td {
  border: 1px solid green;
  border-left-width: 0;
  min-width: 120px;
  height: 18px;
}

td:first-child {
  border-left-width: 1px;
}
<div>
  <table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
  </table>
</div>

4

Se você aceitar lidar com um layout fixo, com larguras de célula predefinidas, é possível obter esse resultado visual empilhando duas tabelas:

table {
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: 6px;
}

td {
    border: 1px solid green;
    min-width: 120px;
    height: 18px;
}
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Porém isso tem um impacto negativo sobre a semântica da tabela (já que os dados acabam espalhados por múltiplas tabelas). Pode então ser o caso de não utilizar tabela, e sim divs.

Infelizmente não conheço solução perfeita.

3

Uma solução colocar um "separador" de linhas....

td{
  border:1px solid #000000;
  }
table tr[class=separar]{
  display:block;
  margin-bottom:8px;
  }
<table cellspacing="0" cellpadding="0">
  <tr>
    <td>Dados</td>
    <td>Dados</td>
  </tr>
  <tr class="separar"></tr>
  <tr>
    <td>Dados</td>
    <td>Dados</td>
  </tr>
</table>

2

Uma opção seria utilizar border-collapse:collapse com borda inferior da tr e cor do background e tamanho de espaço desejado. Colocar o background do td da cor da borda desejada e um elemento dentro da td para criar a ilusão de borda, veja melhor no exemplo abaixo:

table{
    width: 100%;
    border-collapse:collapse;
}
table tr {
    border-bottom: solid white 8px; /*Distancia entre tr*/
}
table tr td {
    background-color:green;  /*Cor para criar ilusão de borda*/
}
table tr td:not(:last-child) {
    padding: 1px 0 1px 1px; /*Retirar padding a direita da td, exceto da última para não criar colapso de bordas*/
}
table tr td span {
    display:block;
    background-color:white;
    padding:5px 5px 0 5px;
}
table tr:nth-child(even) td span {
    background-color:#ccc; /*Se desejar alternar cores das linhas*/
}
<table>
    <tr>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
    </tr>
    <tr>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
    </tr>
    <tr>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
    </tr>
    <tr>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
    </tr>
</table>

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 .