Preenchendo uma linha da mesa

Question 1

<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

Question 2

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;       
}

Question 3

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 www-style@w3c.orglista 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.

Question 4

dar o padding td

Question 5

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;
}

Question 6

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.

Expandir snippet

Question 7

Você pode simplesmente adicionar esse estilo à tabela.

table {
    border-spacing: 15px;
}