CSS Cell Margin

95

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

html css cell margin css-tables Tom
fonte

Há uma boa solução CSS aqui, recém-atualizada: stackoverflow.com/a/21551008/2827823

Ason

89

Aplique isso ao seu primeiro <td>:

padding-right:10px;

Exemplo de HTML:

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

roman m
fonte

12

Uma abordagem muito melhor para isso seria usar o colapso da fronteira: separado

Gaurav Ramanan

21

Apenas no caso de alguém estar copiando / colando a técnica de colapso de borda no comentário acima, deveria ser border-collapse: separate(houve um erro de digitação na grafia separateacima)

Tony DiNitto

1

Além disso, se você quiser definir a quantidade de espaço entre as bordas, você terá que usarborder-spacing: 5px;

Sølve Tornøe

border-spacingtambém adiciona espaço entre as linhas. Infelizmente, não há uma propriedade separada para espaçamento vertical e horizontal.

Lee Blake

border-spacingaceita dois argumentos - um para horizontal e outro para vertical.

OldTinfoil

152

Um aviso: embora padding-rightpossa resolver seu problema (visual) específico, não é a maneira certa de adicionar espaçamento entre as células da tabela. O que padding-rightfaz para uma célula é semelhante ao que faz para a maioria dos outros elementos: adiciona espaço dentro da célula. Se as células não tiverem uma borda ou cor de fundo ou qualquer outra coisa que denuncie o jogo, isso 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 ignoradas para células da tabela:

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

Os elementos internos da mesa geram caixas retangulares com conteúdo e bordas. As células também têm preenchimento. Os elementos internos da tabela não têm margens.

Qual é a maneira "certa" então? Se você está procurando substituir o cellspacingatributo da tabela, então border-spacing(com border-collapsedesativado) é uma substituição. No entanto, se as "margens" por célula forem necessárias, não tenho certeza de como isso pode ser alcançado corretamente usando CSS. O único hack em que consigo pensar é usar paddingcomo descrito acima, evitar qualquer estilo das células (cores de fundo, bordas, etc.) e, em vez disso, usar DIVs de contêiner dentro das células para implementar esse estilo.

Eu não sou um especialista em CSS, então posso estar errado no acima (o que seria ótimo saber! Eu também gostaria de uma solução CSS de margem de célula de tabela).

Felicidades!

Ravi
fonte

Isso é ótimo e tudo para preenchimento, mas e quanto à margem? Quero adicionar espaço fora da célula que contém uma borda. Margin CSS parece não afetar as células.

Levitikon

1

Levitikon, isso mesmo - as margens não funcionam pelos motivos acima. A única maneira de obter o que deseja, AFAIK, é envolver o conteúdo da célula em um DIV, adicionar a margem e a borda a esse DIV, em vez da célula.

ravi

Eu postei uma solução CSS há muito tempo (atualizei hoje): stackoverflow.com/a/21551008/2827823

Ason

28

Se você não pode usar preenchimento (por exemplo, você tem bordas em td) tente isto

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

nika206
fonte

3

Você pode verificar mais sobre o colapso da fronteira: separe aqui css-tricks.com/almanac/properties/b/border-collapse

Gaurav Ramanan

14

Sei que isso é um tanto tardio, mas, para registro, você também pode usar seletores CSS para fazer isso (eliminando a necessidade de estilos embutidos). Este CSS aplica preenchimento à primeira coluna de cada linha:

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

E este seria o seu HTML, sem CSS !:

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

Isso permite uma marcação muito mais elegante, especialmente nos casos em que você precisa fazer várias formatações específicas com CSS.

fonte

14

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

Cian
fonte

Parece que a borda tem o mesmo problema que o preenchimento - adiciona espaço entre o conteúdo da célula e o limite, não fora do limite.

stewbasic

11

Você pode simplesmente fazer isso:

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

Nenhum CSS é necessário :) Este 10px é o seu espaço.

MrTrebor
fonte

isso é bom, simples e eficaz, obrigado por me lembrar de +1

Hayden Thring

8

Esta não é uma boa abordagem para separação de estrutura e estilo. Não é o caso de se o CSS é necessário ou não - o CSS deve ser usado para algo assim.

Simon Robb,

não deve ser <td style = "width: 10px;"> </td>

Rune Jeppesen

1

Lembre-se de que as soluções mais simples são as melhores. Método com estilo inline também é bom :)

MrTrebor

Está funcionando para o meu caso específico. Muito criativo. Obrigado

Phan Van Linh

7

Experimente padding-right. Você não tem permissão para colocar margin's entre as células.

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

mpen
fonte

4

Usando o recolhimento da borda: separar; não funcionou para mim, porque eu só preciso de uma margem entre as células da mesa e não nas laterais da mesa.

Eu descobri a próxima solução:

- 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>

Robin
fonte

4

Este trabalho solução para tdé essa necessidade tanto bordere paddingpara denominar.
(Testado no 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 em 2016

Firefox agora oferece suporte sem inline-blocke um conjuntowidth

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>

Expandir trecho

Um filho
fonte

Isso também funcionou para tabelas css (display: table *) feitas de divs.

Necreaux

2

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

jerebear
fonte

2

Se você tiver controle da largura da tabela, insira um preenchimento à esquerda em todas as células da tabela e insira uma margem esquerda negativa em toda a tabela.

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

table td {
    padding-left: 20px;
}

Observe que a largura da tabela deve incluir o preenchimento / largura da margem. Usando o acima como exemplo, a largura visual da tabela será de 700px.

Esta não é a melhor solução se você estiver usando bordas nas células da tabela.

Dallas Clark
fonte

2

SOLUÇÃO

Descobri que a melhor maneira de resolver esse problema era uma combinação de tentativa e erro e leitura do que foi escrito antes de mim:

http://jsfiddle.net/MG4hD/

Como você pode ver, tenho algumas coisas bem complicadas acontecendo ... mas o principal fator para fazer isso parecer bom são:

ELEMENTO PAI (UL): colapso da borda: separado; espaçamento de borda: .25em; margem esquerda: -.25em;
ELEMENTOS DE CRIANÇA (LI): display: célula de tabela; alinhamento vertical: 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; }

Oneezy
fonte

1

Seguindo a solução de Cian de definir uma borda no lugar de uma margem, descobri que você pode definir a cor da borda como transparente para evitar ter que corresponder à cor do fundo. Funciona em FF17, IE9, Chrome v23. Parece uma solução decente, desde que você também não precise de uma borda real.

Vitaly Chernobyl
fonte

1

<!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>

Expandir trecho

Usar preenchimento não é a maneira correta de fazer isso, pode mudar a aparência, mas não é o que você queria. Isso pode resolver seu problema.

Sengottaian Karthik
fonte

Esta solução já está postada, não há necessidade de 2 respostas dizendo a mesma coisa.

Ason

1

Você pode usar os dois:

padding-right:10px;

padding-right:10%;

Mas é melhor usar com % .

Muhammad Awais
fonte

1

Eu votei a favor, mas você deve ter explicado por que é melhor usar%

Mawg diz reintegrar Monica em

1

Normalmente% é usado para tornar responsivo.

Muhammad Awais

1

Mais um - talvez você possa editar sua resposta para dizer isso? Nem todos os que lêem podem ler os comentários. Se você quiser adicionar um link para algo sobre design responsivo, melhor ainda :-)

Mawg diz para restabelecer Monica

1

Se o preenchimento não estiver funcionando para você, outra solução é adicionar colunas extras e definir uma margem por meio da largura usando <colgroup>. Nenhuma das soluções de preenchimento acima estava funcionando para mim, pois eu estava tentando dar uma margem à própria borda da célula, e isso foi o 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>

Defina o estilo das bordas das células da tabela usando: nth-child para que a segunda e a terceira colunas pareçam 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; }

Esdras
fonte

Isso é mascarar o problema, não respondê-lo. Ninguém vai aprender como fazer isso adequadamente

Mawg diz para reintegrar Monica em

CSS Cell Margin

Respostas:

SOLUÇÃO