Como você especifica o preenchimento de mesa em CSS? (mesa, sem enchimento de células)
A etiqueta de mesa não parece aceitar um valor de enchimento.
Firebug mostra o layout da mesa e do tbody com enchimento 0, mas não aceita qualquer valor introduzido para eles, então eu acho que eles apenas não têm a propriedade de enchimento.
Mas a coisa é que eu quero a mesma separação entre as células do que as células de topo com a mesa de cima e as células de baixo com a tabela de inferior.
Mais uma vez, o que eu quero não é enchimento de células.
EDIT: obrigado, o que eu realmente precisava, eu percebi agora, era espaço de fronteiras, ou seu equivalente html, cellspacing.
Mas por alguma razão, não fazem nada no site em que estou a trabalhar.
Ambos funcionam muito bem em um HTML separado, mas no site eles não.
Pensei que podia ser um estilo Qualquer a substituir a propriedade, mas a localização de telemóveis e um espaço entre fronteiras não deviam ser substituídos, certo?
(Eu uso firefox)
editar 2: não, TD padding não é o que eu preciso. Com o preenchimento TD, as placas de cima e de baixo das células adjacentes somam-se, então há o dobro do espaço (acolchoamento na verdade) entre duas células do que entre a célula de cima e a borda de cima da mesa. Quero ter exactamente a mesma distância entre eles.
11 answers
O método mais fácil/melhor suportado é usar <table cellspacing="10">
The css way: border-spacing (not supported by IE i don't think)
<!-- works in firefox, opera, safari, chrome -->
<style type="text/css">
table.foobar {
border: solid black 1px;
border-spacing: 10px;
}
table.foobar td {
border: solid black 1px;
}
</style>
<table class="foobar" cellpadding="0" cellspacing="0">
<tr><td>foo</td><td>bar</td></tr>
</table>Editar: se só quiser preencher o conteúdo da célula, e não o espaço, pode simplesmente usar
<table cellpadding="10">
Ou
td {
padding: 10px;
}
cellspacing pode até chegar a ela, e essa propriedade não tem analógico em CSS.
Então, para resolver o seu problema, eu sugeriria um papel de mergulhador como outro poster sugere, ou se você absolutamente deve mantê-lo contido na mesa, você tem esse lixo feio:
<style>
.padded tr.first td { padding-top:10px; }
.padded tr.last td { padding-bottom:10px; }
.padded td.first { padding-left:10px; }
.padded td.last { padding-right:10px; }
</style>
<table class='padded'>
<tr class='first'>
<td class='first'>a</td><td>b</td><td class='last'>c</td>
</tr>
<tr>
<td class='first'>d</td><td>e</td><td class='last'>f</td>
</tr>
<tr class='last'>
<td class='first'>g</td><td>h</td><td class='last'>i</td>
</tr>
</table>
.ablock table td {
padding:5px;
}
Depois enrole a tabela num div
adequado.<div class="ablock ">
<table>
<tr>
<td>
Por exemplo, você pode embrulhar a mesa inteira em um DIV e definir o enchimento para o div.
Com css, uma tabela pode ter enchimento independentemente das suas células.
A propriedade de enchimento não é herdada pelos seus filhos.Então, definindo:
table {
padding: 5px;
}
Deve funcionar. Você também pode dizer especificamente ao navegador como pad (ou, neste caso, não pad) suas células.
td {
padding: 0px;
}
Editar: não suportado pelo IE8. Triste.
O CSS não nos permite fazer isto ao nível da mesa. Geralmente, especifico {[[0]} quando quero atingir este efeito. Obviamente não é uma solução css, por isso, aceita-a pelo que vale.
/* Padding on the sides of the table */
table th:first-child, .list td:first-child { padding-left: 28px; }
table th:last-child, .list td:last-child { padding-right: 28px; }
(acabei de o ver no meu trabalho actual)
table {
border: 1px solid transparent;
}
table {
background: #fff;
box-shadow: 0 0 0 10px #fff;
margin: 10px;
width: calc(100% - 20px);
}