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.
Respostas:
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>border-collapse: separate(houve um erro de digitação na grafia separateacima)
border-spacing: 5px;
border-spacingtambém adiciona espaço entre as linhas. Infelizmente, não há uma propriedade separada para espaçamento vertical e horizontal.
border-spacingaceita dois argumentos - um para horizontal e outro para vertical.
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!
Se você não pode usar preenchimento (por exemplo, você tem bordas em td) tente isto
table {
border-collapse: separate;
border-spacing: 2px;
}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.
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 ...
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.
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>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>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.
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:
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; }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.
<!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>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.
Você pode usar os dois:
padding-right:10px;
padding-right:10%;Mas é melhor usar com % .
%
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; }