Enchimento de mesa não funcional
Tenho uma mesa que se senta dentro de um div pai cheio de texto corporal e outro conteúdo. Tenho o seguinte CSS que não parece funcionar:
table {width:100%; padding: 0 50px 0 50px;}
Quando eu uso margens em vez de enchimento, ele funciona-no entanto, com largura:100%, usando margens retira a coisa toda do div pai. Eu acho que eu poderia reduzir a largura ou especificar uma quantidade exata de pixels, mas o resto das escalas do site com o tamanho da tela e eu gostaria que isso funcionasse assim, também.
3 answers
Existem algumas propriedades especiais relacionadas com as tabelas. O que você está procurando é border-spacing.
table {
width: 100%;
border-collapse: separate;
border-spacing: 0 50px;
}
Exemplo: http://jsfiddle.net/feeela/fPuQ6/
Atualização: Depois de brincar com o meu próprio violino devo admitir, que estava errado ao dizer que "uma mesa não tem um remo". O preenchimento na mesa está funcionando bem – pelo menos quando visto em cromo e Ópera (12). O seguinte excerto deve querer que você também queira:
table {
width: 100%;
padding: 0 50px 0 50px;
}
Versão actualizada do violino: http://jsfiddle.net/feeela/fPuQ6/3/
No entanto, ainda me pergunto porque é que o enchimento não é adicionado à largura como para um elemento com display: block;.
Ver além disso:
A resposta anterior mostra que o css pode definir a direcção da ea separadamente. Mas uma solução css muito mais simples que replica o antigo estilo table cellpadding="7" border="1" pode ser a seguinte. Em CSS:
table {
border-collapse:collapse;
width: 100%;
}
td {
padding: 7px;
border:1px solid;
}
Mostrado neste violino: http://jsfiddle.net/b5NW5/77
Pode adicionar o enchimento da célula na definição da tabela ou, se quiser usar o CSS, então use:
Se utilizar CSS:
<style type="text\css">
.table {
width: 100%;
border-top:1px solid red;
border-right:1px solid red;
border-collapse:collapse;
}
.table td {
padding: 7px;
border-bottom:1px solid red;
border-left:1px solid red;
}
</style>
<table class="table">
<tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
<tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
<tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>
Se utilizar inline:
<table cellpadding="9" cellspacing="5" style="border-collapse:collapse;" border="1">
<tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
<tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
<tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>