Margem celular CSS

https://stackoverflow.com/questions/716442

23-08-2019
|

Pergunta

Em meu documento HTML, eu tenho uma tabela com duas colunas e várias linhas. Como posso aumentar o espaço entre a primeira ea segunda coluna com css? Eu tentei aplicar "margin-right: 10px;" para cada uma das células do lado esquerdo, mas sem efeito.

Solução

Aplicar isso ao seu primeiro <td>:

padding-right:10px;

exemplo HTML:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

Outras dicas

Uma palavra de advertência: embora padding-right pode resolver o seu problema particular (visual), não é o caminho certo para adicionar espaçamento entre as células da tabela . O que padding-right faz para uma célula é semelhante ao que ele faz para a maioria dos outros elementos: ele adiciona espaço dentro a célula. Se as células não têm uma borda ou cor de fundo ou qualquer outra coisa que dá ao jogo de distância, este pode imitar o efeito de definir o espaço entre as células, mas não o contrário.

Como alguém observou, as especificações de margem são ignorados para as células da tabela:

CSS 2.1 Especificação - Tabelas - layout visual do conteúdo da tabela

elementos tabela interna gerar caixas retangulares com conteúdo e fronteiras. As células têm estofo assim. os elementos da tabela internos não têm margens.

O que é o caminho "certo", então? Se você está olhando para substituir o atributo cellspacing da mesa, border-spacing então (com border-collapse desativado) é um substituto. No entanto, se forem necessárias "margens" por célula, não estou certo de como isso pode ser corretamente alcançado usando CSS. A única cortar que eu posso pensar é usar padding como acima, evitar qualquer styling das células (cores de fundo, fronteiras, etc.) e em vez disso usar DIVs recipiente no interior das células para implementar tal estilo.

Eu não sou um especialista em CSS, então eu poderia muito bem estar errado no exemplo acima (o que seria muito bom saber! Eu também gostaria de uma solução CSS margem de célula de tabela).

Felicidades!

Se você não pode usar enchimento (por exemplo, você tem fronteiras em td) tentar este

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

Sei que isso é bastante tardia, mas para o registro, você também pode usar seletores CSS para fazer isso Este CSS aplica estofo para a primeira coluna de cada linha (eliminando a necessidade de estilos inline.):

table > tr > td:first-child { padding-right:10px }

E este seria o seu HTML, sans CSS:

<table><tr><td>data</td><td>more data</td></tr></table>

Isto permite a marcação muito mais elegante, especialmente nos casos em que você precisa fazer muitas específico de formatação CSS.

A margem não funciona, infelizmente, em células individuais, no entanto, você pode adicionar colunas extras entre as duas células que deseja colocar um espaço entre ... outra opção é usar uma borda com a mesma cor que o fundo ...

Você pode simplesmente fazer isso:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

No CSS é necessária :) Este 10px é o seu espaço.

padding-right tentativa. Você não está autorizado a colocar margin de entre as células.

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

Usando border-collapse: separada; não funcionou para mim, porque eu só precisa de uma margem in-entre as células da tabela não nos lados da mesa

Eu vim com a solução seguinte:

- CSS

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

- HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

Este trabalho solução para o td que precisam tanto border e padding para o estilo.
(Testado em Chrome 32, IE 11, Firefox 25)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

Atualizado 2016

O Firefox agora apoiá-lo sem inline-block e uma width set

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }

<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>

Você não pode single colunas individuais em uma célula dessa maneira. Na minha opinião, a melhor opção é adicionar um style='padding-left:10px' na segunda coluna e aplicar os estilos em um div interna ou elemento. Desta forma, você pode alcançar a ilusão de um espaço maior.

Se você tem o controle da largura da tabela, insira um padding-left em todas as células da tabela e inserir um negativo margin-left em toda a tabela.

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

Note, a largura da tabela precisa incluir a largura estofamento / margem. Utilizando o anterior, como um exemplo, a largura visual da tabela será 700px.

Esta não é a melhor solução se você estiver usando as fronteiras de suas células da tabela.

SOLUÇÃO

Eu encontrei a melhor maneira de resolver este problema foi uma combinação de tentativa e erro e ler o que foi escrito diante de mim:

http://jsfiddle.net/MG4hD/

Como você pode ver eu tenho algumas coisas muito complicado acontecendo ... mas a principal kicker de conseguir isso para boa aparência são:

PAI ELEMENTO (UL): fronteira-colapso: separada; fronteira-espaçamento: .25em; -margem esquerda: -.25em;
CRIANÇA ELEMENTOS (LI): exibição: célula da tabela; vertical-align: meio;

HTML

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

CSS

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }

A seguir solução de definição de uma fronteira no lugar de uma margem de Cian, eu descobri que você pode definir a cor da borda para transparente para evitar ter que combinar a cor do fundo. Obras em v23 FF17, IE9, Chrome. Parece ser uma solução decente desde que você também não precisa de uma fronteira real.

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

Usando o preenchimento não é maneira correta de fazê-lo, pode alterar a aparência, mas não é o que você queria. Isso pode resolver o seu problema.

Você pode usar ambos:

padding-right:10px;

padding-right:10%;

Mas é melhor usar com % .

Se o preenchimento não está funcionando para você, outra solução é adicionar colunas extras e definir uma margem de via largura usando <colgroup>. Nenhuma das soluções de preenchimento acima foram trabalhar para mim como eu estava tentando dar a borda da célula em si uma margem, e é isso que resolveu o problema no final:

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

Style as fronteiras das células da tabela usando:. Nth-child para que os 2º e terceira colunas parecem ser uma única coluna

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow