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

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