<html>
<head>
<title>Table Row Padding Issue</title>
<style type="text/css">
tr {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<h2>Lorem Ipsum</h2>
<p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse
platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed
tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae
mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus
hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non
scelerisque.</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Aqui está a aparência do preenchimento. Veja como o td interno não é afetado. Qual é a solução?
<div>e em<p>vez de uma mesaRespostas:
O truque é dar preenchimento aos
tdelementos, mas abrir uma exceção para o primeiro (sim, é hacky, mas às vezes você tem que jogar pelas regras do navegador):td { padding-top:20px; padding-bottom:20px; padding-right:20px; } td:first-child { padding-left:20px; padding-right:0; }O primeiro filho é relativamente bem suportado: https://developer.mozilla.org/en-US/docs/CSS/:first-child
Você pode usar o mesmo raciocínio para o preenchimento horizontal usando
tr:first-child td.Como alternativa, exclua a primeira coluna usando o
notoperador . O suporte para isso não é tão bom agora, no entanto.td:not(:first-child) { padding-top:20px; padding-bottom:20px; padding-right:20px; }fonte
<td>s fictícios .Nas especificações CSS 1 e CSS 2 , o preenchimento estava disponível para todos os elementos, incluindo
<tr>. Ainda assim, o suporte de preenchimento para table-row (<tr>) foi removido nas especificações CSS 2.1 e CSS 3 . Eu nunca encontrei a razão por trás dessa mudança irritante que também afeta a propriedade de margem e alguns outros elementos da tabela (cabeçalho, rodapé e colunas).Atualização: em fevereiro de 2015, este tópico na
[email protected]lista de discussão discutiu sobre a adição de suporte de preenchimento e borda para linha de tabela. Isso aplicaria o modelo de caixa padrão também aos elementos da linha da tabela e da coluna da tabela. Isso permitiria tais exemplos . O tópico parece sugerir que o suporte ao preenchimento de linha de tabela nunca existiu nos padrões CSS, porque ele teria mecanismos de layout complicados. No modelo de caixa básica de Rascunho de CSS do Editor de 30 de setembro de 2014 , existem propriedades de preenchimento e borda para todos os elementos, incluindo elementos de linha e coluna da tabela. Se eventualmente se tornar uma recomendação do W3C, seu exemplo html + css pode funcionar como esperado em navegadores, finalmente.fonte
dar o padding td
fonte
Opção 1
Você também pode resolver isso adicionando uma borda transparente à linha (tr), como este
HTML
<table> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> </table>CSS
tr { border-top: 12px solid transparent; border-bottom: 12px solid transparent; }Funciona perfeitamente, embora se você precisar de bordas regulares, esse método infelizmente não funcionará.
opção 2
Uma vez que as linhas atuam como uma forma de agrupar células, a maneira correta de fazer isso seria usar
table { border-collapse: inherit; border-spacing: 0 10px; }fonte
Este é um post muito antigo, mas achei que deveria postar minha solução para um problema semelhante que enfrentei recentemente.
Resposta : Resolvi esse problema exibindo o elemento tr como um elemento de bloco , ou seja, especificando um CSS de display: block para o elemento tr . Você pode ver isso no exemplo de código abaixo.
<style> tr { display: block; padding-bottom: 20px; } table { border: 1px solid red; } </style> <table> <tbody> <tr> <td> <h2>Lorem Ipsum</h2> <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non scelerisque. </p> </td> </tr> </tbody> </table> <br> <br>This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block in order for padding to apply at the tr level.fonte
div.Você pode simplesmente adicionar esse estilo à tabela.
table { border-spacing: 15px; }fonte