Preenchendo uma linha da mesa

88
<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? Problema de preenchimento de linha de tabela

Spencer
fonte
1
usar <div>e em <p>vez de uma mesa
Natrium
37
os dados apresentados são tabulares e devem estar em uma tabela
Spencer

Respostas:

121

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;       
}
Joeri Hendrickx
fonte
Eu usaria: não operador para excluir um único item. like tr: not (#first_row)
jeff
@CengizFrostclaw de fato, isso seria mais consistente. Mas o suporte não é tão bom.
Joeri Hendrickx
Oh, você pode estar certo. Não sei, só faz sentido acreditar que: operadora não é mais suportada, mas, novamente, eu só testo no Chrome: D
jeff
8
isso não é 'hacky', é exatamente para isso que esses seletores foram projetados
spinners
@spinners, isso é hacky. Não funciona com layout RTL. Crie <td>s fictícios .
Adam Leggett
28

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.

Futal
fonte
3
Eu também estaria muito interessado no motivo!
Dan,
8

dar o padding td

Moin Zaman
fonte
4
A única coisa é se houver 2 td dentro de um tr então haverá preenchimento entre o 2 td, o que eu não quero.
Spencer,
6

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;
}
Karl Johan Vallner
fonte
-1

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.

Sunil
fonte
8
Isso confunde totalmente como o layout da mesa geralmente funciona. Se você estiver fazendo isso, você não deve usar uma mesa - use uma regular div.
caesay
-1

Você pode simplesmente adicionar esse estilo à tabela.

table {
    border-spacing: 15px;
}
Ifesinachi Bryan
fonte