CSS: como faço para criar uma lacuna entre as linhas em uma tabela?

94

Significa fazer a tabela resultante parecer menos com isto:

[=== LINHA ===]
[=== LINHA ===]
[=== LINHA ===]
[=== LINHA ===]

... e mais como este:

[=== LINHA ===]

[=== LINHA ===]

[=== LINHA ===]

[=== LINHA ===]

Eu tentei adicionar

margin-bottom:1em;

para td e tr, mas não obteve nada. Alguma ideia?

MGOwen
fonte
2
Por que não espaçamento e preenchimento de células?
adatapost de
1
O espaçamento entre células também dará o espaçamento entre as colunas.
rahul
4
Cellspacing e cellpadding não são HTML (X) válidos. Você não deve usá-los.
freiksenet
8
@freiksenet: Você está errado. Eles são HTML4 estritos perfeitamente válidos ( w3.org/TR/html401/struct/tables.html#h-11.2.1 ), XHTML1 ( w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ) e até mesmo XHTML1 .1 ( w3.org/MarkUp/DTD/xhtml-table-1.mod ).
mercator
1
Possível duplicata de espaço entre duas linhas em uma tabela?
ThisClark de

Respostas:

214

Tudo que você precisa:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

Isso pressupõe que você deseja uma lacuna vertical de 1em e nenhuma lacuna horizontal. Se você estiver fazendo isso, provavelmente também deve controlar a altura da linha.

É meio estranho que algumas das respostas que as pessoas deram envolvam o colapso da fronteira: colapso, cujo efeito é exatamente o oposto do que a pergunta pedia.

John Haugeland
fonte
certo, eu estava tentando fazer com que uma coluna específica tivesse um espaçamento maior, então não pensei em aplicá-la à tabela
Jonathan.
4
Esta solução não permite que você aplique seletivamente o espaçamento a certas linhas.
Flimm de
15
A pergunta não solicitou isso.
John Haugeland
Esta é uma boa ideia, mas para preencher a lacuna superior da primeira linha, tive que chegar a uma solução alternativa que não é padrão, eu acho, mas funciona. Dando o thead, tbody {position: relative; top: -{border-spacing-value} }.
Farzad YZ
3
posso dizer que te amo? Oh meu Deus. você acabou de salvar meu a $$
NikosKeyz
93
table {
    border-collapse: collapse;
}

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

As células não reagirão a nada a menos que você defina primeiro o colapso da borda. Você também pode adicionar bordas aos elementos TR depois de configurados (entre outras coisas).

Se for para layout, eu mudaria para o uso de DIVs e técnicas de layout mais atualizadas, mas se isso for dados tabulares, deixe-se levar. Ainda faço uso intenso de tabelas em meus aplicativos da web para dados.

Ryan Florence
fonte
Você testou? Parece que o td pode ter preenchimento com ou sem colapso. Fronteiras funcionam com colapso, mas não no IE.
Kobi
Isso funcionou. É irritante que as margens não funcionem, mas não importa neste caso. Obrigado.
MGOwen
30
Esta é uma abordagem muito ruim. Você está modificando a caixa das células para posicionar as células, em vez de apenas posicionar as células, fundindo as células porque deseja que elas se separem. No segundo que as células precisam de fundos, você está ferrado. A abordagem correta é a separação das bordas, não o colapso das bordas, usando a separação das bordas para definir, você sabe, a separação das bordas.
John Haugeland
1
É quase a primeira parte do CSS2 que foi implementada, porque os navegadores já tinham lacunas de tabela implementadas para a versão HTML que todos costumavam usar para um layout preciso de pixels. Sim, tenho certeza. :)
John Haugeland
1
É um daqueles cantos estranhos do CSS que ninguém, exceto as pessoas que leram as especificações, conhecem. (Há um número surpreendentemente grande deles. Da mesma forma, o flutuador basicamente nunca deve ser usado da maneira como é usado na prática.)
John Haugeland
7

Se nenhuma das outras respostas for satisfatória, você pode apenas criar uma linha vazia e estilizá-la com CSS de forma adequada para ser transparente.

Flimm
fonte
Por que o downvote? As outras respostas são problemáticas: a resposta de rpflo requer que você use o recolhimento de borda e expanda o preenchimento das células, fazendo com que as células pareçam maiores, em vez de criar espaçamento entre elas. A resposta de John Haugeland não permite que você aplique seletivamente o espaçamento a certas linhas. Eu poderia continuar, mas esta resposta é uma opção que funcionou para meu caso de uso quando nenhuma das outras respostas funcionou.
Flimm de
2
A abordagem de votação negativa do usuário anônimo de especificar a altura de linhas individuais com CSS é muito superior a adicionar conteúdo fictício à tabela, na chance de que você precise controlar linhas individuais, que não é sobre o que esta questão se trata.
John Haugeland de
As linhas falsas também confundem as ferramentas que esperam que as linhas da tabela sejam linhas da tabela (como ferramentas de acessibilidade importantes para pessoas com deficiência e plug-ins comuns para exportar / classificar / reformatar / etc). Existem muitas razões para usar estilos para controlar o estilo, ao invés de empurrar coisas falsas, como regra geral. Leia sobre a marcação semântica para obter mais informações.
MGOwen
@MGOwen Você poderia citar as ferramentas de acessibilidade que falhariam neste cenário e como elas falhariam? Agora sou cético em relação a conselhos de acessibilidade que não mencionam detalhes, há muitos conselhos de acessibilidade ruins por aí que não ajudam ninguém (por exemplo, conselhos de esboço de documento para HTML 5 estavam todos errados , ferramentas de acessibilidade não trabalhar da maneira que as pessoas dizem que trabalham).
Flimm
4

Se você não tem bordas, ou tem bordas e deseja o espaçamento dentro das células, pode usar paddingou line-height. Pelo que eu sei, a margem não tem efeito nas células e linhas.
Uma propriedade CSS para espaçamento de células é border-spacing, mas não funciona no IE6 / 7 (portanto, você pode usá-la dependendo do seu grupo).

Se tudo mais falhar, você pode usar o cellspacingatributo antigo em sua marcação - mas isso também fornecerá espaçamento entre as colunas. Algumas redefinições de CSS sugerem que você deve defini-lo de qualquer maneira para obter suporte para vários navegadores:

/ * tabelas ainda precisam cellspacing="0"na marcação * /

Kobi
fonte
2

Este é o caminho (estava pensando que é impossível):

Primeiro, dê à tabela apenas o espaçamento das bordas verticais (por exemplo 5px) e defina o espaçamento das bordas horizontais para 0. Então você deve dar as bordas adequadas para cada célula da linha. Por exemplo, a célula mais à direita em cada linha deve ter uma borda superior, inferior e direita. As células mais à esquerda devem ter uma borda superior, inferior e esquerda. E as outras células entre essas 2 devem ter apenas borda superior e inferior. Como este exemplo:

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>
Arash Esmaeili
fonte
1

Em minha opinião, a maneira mais fácil de fazer é adicionar preenchimento à sua tag.

td {
 padding: 10px 0
}

Espero que isso ajude você! Torça!

Huy Le
fonte
Isso cria espaço extra dentro da linha da tabela. Se as linhas da tabela tiverem cores, isso não ficará bom.
Kokodoko
1

Simplesmente você pode usar padding-tope padding-bottomem um tdelemento.

A unidade pode qualquer coisa desta lista:

insira a descrição da imagem aqui

Código de demonstração:

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

Abrar Jahin
fonte
0

o preenchimento no TD funciona se você quiser que o espaço tenha a mesma cor de fundo do td

no meu caso, o requisito era um espaço em branco entre a linha do cabeçalho e o que quer que estivesse acima dela

aplicando esse estilo a uma única célula, consegui a separação desejada. Não foi necessário adicioná-lo a todas as células ... Possivelmente não o MAIS elegante, mas possivelmente mais elegante do que as linhas separadoras.

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  
Greg
fonte
-1

Se você seguir o design usando tabelas, a melhor ideia será fornecer uma linha vazia sem conteúdo e a altura especificada entre cada linha da tabela.

Você pode usar div para evitar essa complexidade. Basta dar uma margem para cada div.

Rahul
fonte
1
Ainda há boas razões para usar tabelas (como dados tabulares). Você está certo, linhas vazias certamente são um caminho bobo: P Mas há uma solução, o colapso da borda.
Ryan Florence
-1

Você também pode simplesmente modificar a altura de cada linha usando CSS.

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

Você também pode modificar a altura do <td>elemento, deve dar o mesmo resultado.


fonte
-1

Crie um outro <tr>logo abaixo e adicione algum espaço ou altura ao conteúdo de<td>

insira a descrição da imagem aqui

Verifique o violino, por exemplo

https://jsfiddle.net/jd_dev777/wx63norf/9/

Jaydeep Chauhan
fonte
Isso é considerado uma prática ruim. Uma das razões é que as ferramentas (como leitores para usuários com deficiência) esperam que as linhas da tabela sejam linhas da tabela e irão exportar / ler / interpretar suas linhas "falsas" misturadas com as reais. Veja a primeira vez que essa mesma resposta foi dada em 2014, acima.
MGOwen
1
@MGOwen obrigado pela sua sugestão. totalmente de acordo
Jaydeep Chauhan
-4

Adicione a seguinte regra a tr e deve funcionar

float: left

Amostra (abra-o no IE9 offcourse :)): http://jsfiddle.net/zshmN/

EDIT: Esta não é uma solução legal ou correta como apontado por muitos, mas se você ficar sem opção e precisar de algo, isso funcionará no IE9.

Então, todos aqueles que estão dando votos, por favor, nos digam a solução correta também

Sandeep Choudhary
fonte
3
Essa abordagem evita o alinhamento automático de colunas quando as células contêm dados com dimensões diferentes - a marcação da tabela é essencialmente inútil. Funciona bem nos exemplos fornecidos, mas não é uma técnica aconselhável. Altere o texto de uma célula para ver o que quero dizer.
verism
Ei @verism, desculpe, mas eu não entendi seu ponto. Você pode explicar um pouco mais? Ou se você puder fornecer uma charada onde esse método falha, visto que tenho usado esse método extensivamente e gostaria de cuidar dos cenários em que ele falha.
Sandeep Choudhary
Não há um delineamento claro das colunas; o que significa que os dados tabulares perdem sua estrutura visual e se tornam mais difíceis de ler. jsfiddle.net/verism/zshmN/5
verism
@verism ya este é um problema, mas podemos definir colunas de largura fixa. Sei que não é uma boa solução, mas não encontrei nenhuma outra solução que funcione no IE9
Sandeep Choudhary
1
As linhas da tabela flutuante não são legais de acordo com a especificação CSS. A seção 17 do CSS2 requer que os elementos display: table-row estejam dentro de display: elementos table-row-group, -header-group ou -footer-group. No entanto, o algoritmo flutuante de acordo com a seção 9 injeta um pai de bloco anônimo. Isso significa que a linha da tabela não tem mais um layout pai legal e o navegador está tentando adivinhar o que fazer. Isso é totalmente incorreto.
John Haugeland