Não é possível colocar margem na etiqueta sem o atributo CSS ou cellspacing

Por qualquer razão, não consegui que as células da mesa tivessem margem entre elas. Eu quero que as células da tabela para ter uma cor de fundo cinza (sobre um fundo de página branca) para que se pareça com azulejos com branco entre eles.

tentei no HTML, 

<table cellspacing="3">

também na CSS, 

table td {
    margin:3px;
}
Nada funciona. As células ainda estão Unidas, como uma grande bolha cinzenta. Está a escapar-me algo muito básico?

Aqui está o código actual: 

<table width="100%" cellspacing="3">
    <tr>
        <th>Document Number</th>
        <th>BP Reference No.</th>
        <th>Posting Date</th>
        <th>Posting Week</th>
        <th>Customer/Vendor Code</th>
        <th>Customer/Vendor Name</th>
        <th>Item No.</th>
        <th>Item/Service Description</th>
        <th>Item Group</th>
        <th>Warehouse Code</th>
        <th>Remaining Open Quantity</th>
        <th>Line No.</th>
        <th>Sales Employee Name</th>
        <th>Stock</th>
        <th>Fill Rate</th>
        <th>1046</th>
        <th>1047</th>
        <th>1048</th>
        <th>1049</th>
        <th>1050</th>
        <th>1051</th>
        <th>1052</th>
        <th>1053</th>
        <th>1054</th>
        <th></th>
    </tr>
    <tr>
        <td>17272</td>
        <td>2244100</td>
        <td>5/24/2010</td>
        <td>22</td>
        <td>NYST</td>
        <td>NYSTROM INC.</td>
        <td>NYM118SX26DSTKS01</td>
        <td>Nystrom, Mort. 1-1/8'', Schl C~K, US26D, ST cam, 5pin, KS #43758</td>
        <td>Mort Cylinders</td>
        <td>US1</td>
        <td>1000</td>
        <td>3</td>
        <td>KRE Management 1</td>
        <td>0</td>
        <td>100</td>
        <td>1000</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td></td>
    </tr>
</table>
Author: Brian Tompsett - 汤莱恩, 2010-12-09
Source

7 answers

Se alguém ainda tem este problema, tente isto na sua folha de estilo CSS: 

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

Os valores para o espaçamento entre fronteiras são duas medições de comprimento. Horizontal o valor vem em primeiro lugar e aplica-se entre colunas. A segunda medição é aplicado entre linhas.

Se fornecer um valor, será usado tanto na horizontal como na vertical. A configuração padrão é 0, fazendo com que os contornos dobrem na grade interna da tabela.

 76
Author: sebastian, 2017-09-25 19:04:39

Se estiver a usar uma reinicialização CSS no início da sua 'stylesheet', verifique se tem o seguinte código.

table {
  border-collapse: collapse;
}
Se for esse o caso, tente sobrepô-lo com: 
border-collapse: separate;
 6
Author: Sam Nabi, 2017-09-25 19:04:56
Faz o estilo td com o block. Tenta isto. 
<table width="100%" border="0" cellpadding="2" cellspacing="1">
  <tbody>
    <tr>
      <td class="SlateGridDataError">Please Re-enter login information</td>
    </tr>
  </tbody>
</table>

.SlateGridDataError {
    border-radius: 2px;
    display: block;
    font-size: 14px;
    color: #999999;
    display:block;
    border: 1px solid #dd3c39;
    border-left: 5px solid #dd3c39;
    padding: 12px 5px;
    margin-bottom: 20px;
    cursor: default;
    outline: none;
}
 3
Author: Falah, 2017-09-25 19:05:18

Acho que {[[0]} tem a mesma cor que a cor de fundo da tabela.
Então você tem duas opções:
1. Aplicar a cor de fundo aos tdem vez do <table> em si.
2. Você pode querer usar um contorno branco (border para <td> com um border-collapse: collapse para a tabela)

 0
Author: Nivas, 2010-12-09 10:48:05
Tenta adicionar um td entre os dois TDs que queres ter a margem. Configure-o para não ter fundo (apenas não coloque "fundo:algo;") e para ter a largura que você quer. Se você quiser colocar uma margem entre dois TRs, basta adicionar outro tr entre eles e colocar um td com a altura que você quer que a margem para ter. Você pode até usar a mesma classe para o TDs e definir o CSS apenas uma vez.
 0
Author: Breno, 2014-08-16 14:20:18
Então descobri uma maneira simples de resolver o problema sem qualquer problema. Digamos que tens ... 
<tr><td>This is an example</td></tr>

Encapsule todos os dados num

Etiqueta como esta 

<tr><td><p>This is an example</p></td></tr>

E depois dar o

Marca UMA Margem-Esquerda de qualquer valor que queiras, digamos 

<tr><td><p style="margin-left:4px;">This is an example</p></td></tr>
Faz a magia por mim sem qualquer problema.
 -2
Author: 1baga, 2013-05-18 17:18:54
Isto é um arranjo grosseiro, mas funciona.

Se criar um {[1] } com uma margem do tamanho que deseja ..contendo o seu existente, ambos usando o mesmo fundo ou cor você pode definir a margem da tabela externa para ser o que você quer.

Se você tem uma série de elementos <TD>, crie um <table> dentro do <TD> que você quer ter uma margem e, novamente, certifique-se de que tanto o exterior <table> quanto o interior <TD> têm o mesmo fundo ou cor.

Exemplo do meu blog no http://harrolds.blogspot.com que incorpora um script para mostrar citações...

Tabela principal: 

<table width="100%" bgcolor="lightblue" border=1>
<tbody>
  <tr>
    <td align="left" width="160"><span style="font-family:Times New Roman;font-size: -1;"><small><a href="http://en.wikipedia.org/wiki/Zell_Miller" target="_new">Sen. Zell Miller</a> <small>(D-GA) RNC'04</small></small></span><br /><object width="120" height="106"><param name="movie" value="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&amp;hl=en&amp;fs=1&amp;border=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&hl=en&fs=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="120" height="106"></embed></object><br /><font size="-1"><span style="color: blue; font-family: "sylfaen";><a href="http://www.harrold.org/rfhextra/support_our_Troops.html" target="_new"><b><small>Liberators &amp; Defenders</small></b></a></span></font> 
    </td>

    <td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg">
      <table border=0>
        <tr>
          <td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg"><script language="javascript" src="http://www.harrold.org/rfhextra/quote.js" type="text/javascript"></script>
          </td>
        </tr>
      </table>
    </td>

    <td align="right"><a href="http://www.cafepress.com/rightwingstuff" target="_new"><small><small>RightWingStuff</small></small></a><br /><a href="http://www.gadsdenandculpeper.com/" target="_new"><img src="http://harrold.org/rfhextra/images/GadsdenFlag98x130.gif" width="98" height="130" alt="link source  http://www.cafepress.com/rightwingstuff" border="0" /></a>
    </td>
  </tr>
</tbody>
</table>
 -3
Author: rharrold, 2011-08-22 04:44:10