Espaço entre duas linhas em uma tabela?

Isso é possível via CSS?

estou tentando

tr.classname {
  border-spacing: 5em;
}

para nenhum proveito. Talvez eu esteja fazendo algo errado?

Você precisa usar preenchimento em seus tdelementos. Algo assim deve fazer o truque. Obviamente, você pode obter o mesmo resultado usando um preenchimento superior em vez de um preenchimento inferior.

No código CSS abaixo, o sinal de maior que significa que o preenchimento é aplicado apenas a tdelementos que são filhos diretos para trelementos da classe spaceUnder. Isso tornará possível usar tabelas aninhadas. (Células C e D no código de exemplo.) Não tenho muita certeza sobre o suporte ao navegador para o seletor filho direto (pense no IE 6), mas não deve quebrar o código em nenhum navegador moderno.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Isso deve render algo como isto:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

Na tabela pai, tente definir

border-collapse:separate; 
border-spacing:5em;

Além de uma declaração de fronteira, e veja se isso alcança o efeito desejado. Cuidado, porém, que o IE não suporta o modelo de "bordas separadas".

Você tem tabela com álbuns de identificação com quaisquer dados ... Eu omiti os trs e tds

<table id="albums" cellspacing="0">       
</table>

No css:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

Como tenho uma imagem de fundo atrás da mesa, fingir com estofamento branco não funcionaria. Optei por colocar uma linha vazia entre cada linha de conteúdo:

<tr class="spacer"><td></td></tr>

use css para dar às linhas espaçadoras uma certa altura e fundo transparente.

Na Rede de Desenvolvedores Mozilla :

A propriedade CSS de espaçamento entre bordas especifica a distância entre as bordas das células adjacentes (apenas para o modelo de bordas separadas). Isso é equivalente ao atributo cellpacing no HTML de apresentação, mas um segundo valor opcional pode ser usado para definir o espaçamento horizontal e vertical diferente.

Essa última parte é frequentemente supervisionada. Exemplo:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

ATUALIZAR

Agora entendo que o OP deseja que linhas específicas e separadas tenham espaçamento aumentado. Adicionei uma configuração com tbodyelementos que fazem isso sem arruinar a semântica. No entanto, não tenho certeza se ele é compatível com todos os navegadores. Eu fiz isso no Chrome.

O exemplo abaixo é para mostrar como você pode fazer parecer que a tabela existe de linhas separadas, doçura total do CSS. Também deu à primeira linha mais espaçamento com a tbodyconfiguração. Sinta-se livre para usar!

Aviso de suporte: IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Você pode tentar adicionar a linha separadora:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

Você não pode alterar a margem de uma célula da tabela. Mas você pode alterar o preenchimento. Altere o preenchimento do TD, que aumentará a célula e empurre o texto para o lado com o aumento do preenchimento. Se você tiver linhas de borda, no entanto, ainda não será exatamente o que deseja.

Dê uma olhada no atributo border-collapse: separado (padrão) e na propriedade espaçamento da borda .

Primeiro, você deve separá- los com o recolhimento de borda e , em seguida, definir o espaço entre colunas e linhas com espaçamento de borda .

Ambas as propriedades CSS são realmente bem suportadas em todos os navegadores, veja aqui .

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Ok, você pode fazer

tr.classname td {background-color:red; border-bottom: 5em solid white}

Verifique se a cor do plano de fundo está definida no td em vez da linha. Isso deve funcionar na maioria dos navegadores ... (Chrome, ou seja, teste testado)

Você precisa colocar border-collapse: separate;na mesa; a maioria das folhas de estilo padrão do navegador começa em border-collapse: collapse;, o que diminui o espaçamento das bordas.

Além disso, o espaçamento entre bordas: continua no TD, não no TR.

Tentar:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Você pode usar a altura da linha na tabela:

<table style="width: 400px; line-height:50px;">

tr { 
    display: block;
    margin-bottom: 5px;
}

Uma resposta tarde demais :)

Se você aplicar float a trelementos, poderá espaçar entre duas linhas com marginatributo.

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Para criar uma ilusão de espaçamento entre linhas, aplique a cor de fundo na linha e, em seguida, crie uma borda grossa com a cor branca para criar um "espaço" :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

A maneira correta de fornecer espaçamento para as tabelas é usar o preenchimento e espaçamento entre células, por exemplo

<table cellpadding="4">

Eu me deparei com isso enquanto lutava com um problema semelhante. Eu achei a resposta de Varun Natraaj bastante útil, mas eu usaria uma borda transparente.

td { border: 1em solid transparent; }

Bordas transparentes ainda têm largura.

Funciona para a maioria dos navegadores mais recentes em 2015. Solução simples. Não funciona para transparência, mas, diferentemente da resposta de Thoronwen, não posso ser transparente para renderizar com qualquer tamanho.

    tr {
      border-bottom:5em solid white;
    }

Basta colocar divdentro tde definir os seguintes estilos de div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Sei que essa é uma resposta para um thread antigo e pode não ser a solução solicitada, mas, embora todas as soluções sugeridas não tenham feito o que eu precisava, essa solução funcionou para mim.

Eu tinha 2 células de tabela, uma com cor de fundo e outra com cor de borda. As soluções acima removem a borda, de modo que a célula à direita parece estar flutuando no ar. A solução que fez o truque era para substituir o table, tre tdcom divs e classes correspondentes: Tabela seria div id="table_replacer", tr seria div class="tr_replacer"e td seria div class="td_replacer"(mudança fechando tags para divs bem, obviamente)

Para obter a solução para o meu problema, o css é:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

Espero que isso ajude alguém.

Você pode preencher os elementos <td /> com elementos <div /> e aplicar qualquer margem às divs que desejar. Para um espaço visual entre as linhas, você pode usar uma imagem de plano de fundo repetida no elemento <tr />. (Essa foi a solução que acabei de usar hoje e parece funcionar no IE6 e no FireFox 3, embora não tenha testado mais.)

Além disso, se você é avesso a modificar o código do servidor para colocar <div /> s dentro dos <td /> s, pode usar o jQuery (ou algo semelhante) para agrupar dinamicamente o conteúdo <td /> em um <div / >, permitindo aplicar o CSS conforme desejado.

Ou simplesmente adicione um espaço em branco com a altura da margem entre as linhas que você deseja adicionar o espaçamento

Aqui está uma solução simples e elegante, com algumas ressalvas:

• Na verdade, você não pode tornar as lacunas transparentes; precisa dar uma cor específica.
• Você não pode arredondar os cantos das bordas acima e abaixo das lacunas
• Você precisa conhecer o preenchimento e as bordas das células da tabela

Com isso em mente, tente o seguinte:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

Na verdade, o que você está fazendo é colocar um ::beforebloco retangular na parte superior de todas as células da linha que você deseja preceder por uma lacuna. Esses blocos se destacam um pouco das células para sobrepor as bordas existentes, ocultando-as. Esses blocos são apenas uma borda superior e inferior agrupadas: a borda superior forma a lacuna e a borda inferior recria a aparência da borda superior original das células.

Observe que, se você tiver uma borda ao redor da própria tabela e das células, precisará aumentar ainda mais a margem horizontal dos seus 'blocos'. Portanto, para uma borda de tabela de 4 px, você deve usar:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

E se sua tabela usar em border-collapse:separatevez de border-collapse:collapse, será necessário (a) usar a largura completa da borda da tabela:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... e também (b) substitua a largura dupla da borda que agora precisa aparecer abaixo da lacuna:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

A técnica é facilmente adaptada a uma versão .gapafter, se você preferir, ou à criação de intervalos verticais (coluna) em vez de intervalos de linhas.

Aqui está um código de código em que você pode vê-lo em ação: https://codepen.io/anon/pen/agqPpW

Aqui isso funciona sem problemas:

#myOwnTable td { padding: 6px 0 6px 0;}

Suponho que você possa elaborar um layout mais refinado especificando qual td, se necessário.

fazendo isso mostrado acima ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

remove o alinhamento vertical da coluna, portanto, tenha cuidado ao usá-lo

Você tentou:

tr.classname { margin-bottom:5em; }

Como alternativa, cada td também pode ser ajustado:

td.classname { margin-bottom:5em; }

ou

 td.classname { padding-bottom:5em; }