Set cellpadding e cellspacing em CSS?

StackOverflow https://stackoverflow.com/questions/339923

Pergunta

Em uma tabela HTML, o cellpadding e cellspacing pode ser definido assim: 

<table cellspacing="1" cellpadding="1">

Como pode a mesma ser realizada utilizando CSS?

Foi útil?

Solução

Noções básicas

Para controlar "cellpadding" em CSS, você pode simplesmente usar padding em células da tabela. Por exemplo. para 10px de "cellpadding": 

td { 
    padding: 10px;
}

Para "cellspacing", você pode aplicar a propriedade CSS border-spacing à sua mesa. Por exemplo. para 10px de "cellspacing": 

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

Esta propriedade vai mesmo permitir espaçamento horizontal e vertical separados, algo que não poderia fazer com old-school "cellspacing".

Problemas no IE <= 7

Isto irá funcionar em quase todos os navegadores populares, exceto para o Internet Explorer através do Internet Explorer 7, onde você está quase fora da sorte. Digo "quase" porque esses navegadores ainda suporte a propriedade border-collapse, que mescla as fronteiras do adjacente células da tabela. Se você está tentando eliminar cellspacing (isto é, cellspacing="0"), então border-collapse:collapse deve ter o mesmo efeito: nenhum espaço entre as células da tabela. Este apoio é buggy, embora, como ele não substitui um atributo cellspacing HTML existente no elemento de tabela.

Em suma: para Explorador 5-7 navegadores de Internet não, border-spacing alças de você. Para o Internet Explorer, se sua situação é apenas para a direita (você quer 0 cellspacing e sua mesa não tem já definido), você pode usar border-collapse:collapse. 

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Nota: Para uma grande visão geral de propriedades CSS que pode-se aplicar a tabelas e para as quais navegadores, consulte este fantástica página Quirksmode .

Outras dicas

Padrão

O comportamento padrão do navegador é equivalente a: 

table {border-collapse: collapse;}
td    {padding: 0px;}

Digite os detalhes da imagem aqui

Cellpadding

Define a quantidade de espaço entre os conteúdos da célula e a parede celular? 

table {border-collapse: collapse;}
td    {padding: 6px;}

Digite os detalhes da imagem aqui

CellSpacing

Controla o espaço entre as células da tabela 

table {border-spacing: 2px;}
td    {padding: 0px;}

Digite os detalhes da imagem aqui

Ambos 

table {border-spacing: 2px;}
td    {padding: 6px;}

Digite os detalhes da imagem aqui

Ambos (especial) 

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Digite os detalhes da imagem aqui

. Nota: Se houver set border-spacing, indica propriedade border-collapse da tabela é separate

Tente você mesmo!

Aqui pode encontrar a maneira antiga HTML de conseguir isso. 

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

Definir margens de células da tabela realmente não tem qualquer efeito, tanto quanto eu sei. O verdadeiro equivalente CSS para cellspacing é border-spacing - mas ele não funciona no Internet Explorer.

Você pode usar border-collapse: collapse para o espaçamento da célula de forma confiável set a 0 como mencionado, mas para qualquer outro valor que eu acho que a única maneira de cross-browser é continuar usando o atributo cellspacing.

Isso funciona de hack para o Internet Explorer 6 e mais tarde, Google Chrome , Firefox, e Opera : 

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

A declaração * é para o Internet Explorer 6 e 7, e outros navegadores irá ignorá-lo corretamente.

expression('separate', cellSpacing = '10px') retornos 'separate', mas ambas as declarações são executadas, como em JavaScript você pode passar mais argumentos do que o esperado e todos eles serão avaliados.

Para aqueles que querem um valor cellspacing diferente de zero, o seguinte CSS trabalhou para mim, mas eu só sou capaz de testá-lo no Firefox.

Veja a href="http://www.quirksmode.org/css/tables.html" rel="nofollow noreferrer"> Quirksmode ligação postou em outros lugares para detalhes de compatibilidade. Parece que pode não funcionar com versões mais antigas do Internet Explorer. 

table {
    border-collapse: separate;
    border-spacing: 2px;
}

Uma solução simples para este problema é: 

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

Além disso, se você quiser cellspacing="0", não se esqueça de adicionar border-collapse: collapse no estilo do seu table.

Enrole os conteúdos da célula com um div e você pode fazer o que quiser, mas você tem que envolver todas as células em uma coluna para obter uma efeito uniforme. Por exemplo, apenas para obter mais amplo margens direita e esquerda e:

Assim, a CSS será, 

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}
<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

Sim, é um aborrecimento. Sim, ele funciona com o Internet Explorer. Na verdade, eu só testei isso com o Internet Explorer, porque isso é tudo o que estamos autorizados a usar no trabalho.

Apenas uso border-collapse: collapse para a sua mesa, e padding para th ou td.

TBH. Por todo o fannying redor com CSS você pode muito bem usar cellpadding="0" cellspacing="0" uma vez que eles não são preterido ...

Qualquer outra pessoa sugerindo margens em <td> de obviamente não tentou isto.

Este estilo é para redefinição completa para as tabelas -. cellpadding , cellspacing e fronteiras

Eu tive esse estilo no meu arquivo reset.css: 

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

Basta usar regras de preenchimento CSS com dados da tabela: 

td { 
    padding: 20px;
}

E para espaçamento de borda: 

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

No entanto, ele pode criar problemas na versão mais antiga do navegadores como Internet Explorer por causa da implementação diff do modelo de caixa.

Pelo que eu entendo das classificações W3C é que <table>s são destinadas para a exibição de dados 'apenas'.

Baseado no que eu achei muito mais fácil de criar um <div> com os fundos e tudo o que e ter uma tabela com dados flutuando sobre ele usando position: absolute; e background: transparent; ...

Ele funciona em Chrome, Internet Explorer (6 ou superior) e Mozilla Firefox (2 e mais tarde).

As margens são usados ??(ou de qualquer maneira significava) para criar um espaçador entre os elementos do recipiente, como <table>, <div> e <form>, não <tr>, <td>, <span> ou <input>. Usá-lo para outra coisa senão elementos de contêiner irá mantê-lo ocupado ajustar seu site para atualizações futuras do navegador.

CSS: 

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

Tente isto: 

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Ou tente o seguinte: 

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

Eu costumava !important após o border-collapse como 

border-collapse: collapse !important;

e ele funciona para mim no IE7. Parece para substituir o atributo cellspacing.

Você pode facilmente definir o preenchimento dentro das células da tabela usando a propriedade CSS preenchimento. É uma forma válida para produzir o mesmo efeito que atributo cellpadding da tabela. 

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

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Da mesma forma, você pode usar o CSS propriedade border-spacing para aplicar o espaçamento entre as bordas de célula de tabela adjacentes como o atributo cellspacing. No entanto, a fim de trabalhar border-spacing o valor da propriedade border-collapse Muse ser separado, que é o padrão. 

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

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

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-padding pode ser dada por padding em CSS enquanto cell-spacing pode ser definido através da criação border-spacing para a tabela. 

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle . 

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

Se margin não funcionou, tente set display de tr para block e depois margem vai funcionar.

Para tabelas, cellspacing e cellpadding são obsoletos em HTML 5.

Agora, para CellSpacing você tem que usar border-spacing. E para cellpadding você tem que usar border-collapse.

E certifique-se de não usar isso em seu código HTML5. Sempre tente usar esses valores em um arquivo CSS 3. 

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

Você pode simplesmente fazer algo assim no seu CSS, usando border-spacing e padding: 

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

Em uma tabela HTML, o cellpadding e cellspacing pode ser definido assim:

Para cell-preenchimento :

Basta ligar td/th celular padding simples.

Exemplo: 

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}
<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

Para -espaçamento de célula

Apenas simples chamada table border-spacing

Exemplo: 

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}
<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

Mais estilo de tabela por link da fonte CSS aqui você tem mais estilo tabela CSS .

Como sobre a adição o estilo diretamente para a mesa em si? Isto é, em vez de usar table no seu CSS, que é um BAD abordagem se você tiver várias tabelas em sua página: 

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top