Adicione espaço entre as células (td) usando css

88

Estou tentando adicionar uma tabela com espaço entre as células, pois a cor de fundo da célula é branca e a cor de fundo da tabela é azul, você pode ver facilmente que o preenchimento e a margem não estão funcionando (estou aplicando no td), ele apenas adicionará espaço dentro da célula.

html css Amra
fonte
2
possível duplicata de How to set cellpadding e cellspacing em CSS?
usuário

Respostas:

115

Você quer border-spacing:

<table style="border-spacing: 10px;">

Ou em um bloco CSS em algum lugar:

table {
  border-spacing: 10px;
}

Veja quirksmode em border-spacing. Esteja ciente de que border-spacingnão funciona no IE7 e versões anteriores.

Dominic Rodger
fonte
2
no IE7 e anteriores, você pode usar o atributo cellspacing na tag da tabela. Você pode fornecer ambos para fazê-lo funcionar no IE também. Outros navegadores priorizarão o estilo.
Tor Valamo
36 
table { 
  border-spacing: 10px; 
}

Isso funcionou para mim depois que eu removi 

border-collapse: separate;

da minha etiqueta de mesa.

Kelly
fonte
1
separar em vez de separar, mas me ajudou :-)
FredRoger
Sim, não sabia que você tinha que mudar o 'colapso da fronteira' também. Esta deve ser a resposta correta.
jleggio
30

O meu é:

border-spacing: 10px;
border-collapse: separate;
JanBorup
fonte
eu preciso adicionar a propriedade css boder-collapse para que a margem tenha efeito. obrigado
ufk
4

Considere o uso de atributos cellspacinge cellpaddingpara tabletag ou border-spacingpropriedade css.

Kniganapolke
fonte
4

O parâmetro cellspacing (distance between cells) da tag TABLE é exatamente o que você deseja. A desvantagem é que é um valor, usado tanto para x quanto para y, você não pode escolher espaçamentos ou preenchimentos diferentes vertical / horizontalmente. Também existe uma propriedade CSS, mas não é amplamente suportada.

SF.
fonte
2

Suponha que cellspcing/ cellpadding/ border-spacingpropriedade não funcione, você pode usar o código a seguir.

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

Eu tentei e consegui separar o botão usando table-width e fazer um td vazio como 2 ou 1%, ele não retorna mais diferente.

RAM
fonte
0

Se você quiser valores separados para os lados e parte superior inferior.

<table style="border-spacing: 5px 10px;">
obliviJohn
fonte