0

Como faço para meu TBody ter 100% de altura e minha TR ter n pixel de tamanho? ocorre que quando tenho apenas uma linha, a linha fica com 100%, correspondente ao TBody, e gostaria que ela ficasse fininha! Deu pra entender?

2
  • 1
    100% de que? Altura? Largura?
    – Aline
    Commented 31/05/2017 às 13:41
  • Height! foi mal Commented 31/05/2017 às 13:44

2 Respostas 2

0

Acredito que o que você precisa é trabalhar com a propriedade position dos elementos. Por exemplo, considerando que a tabela estará dentro de uma div de 500px x 500px:

.container {
  width: 500px;
  height: 200px;
  position: relative;
  background: #EfEfEf;
}
<div class="container">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>Stack Overflow em Português</td>
      </tr>
    </tbody>
  </table>
</div>

Para que a tabela preencha o espaço da div, basta adicionar position: absolute junto com width: 100% e height: 100%. Veja:

.container {
  width: 500px;
  height: 200px;
  position: relative;
  background: #EfEfEf;
}

table {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #CC0000;
}
<div class="container">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>Stack Overflow em Português</td>
      </tr>
    </tbody>
  </table>
</div>

Perceba que a tabela preencheu todo o espaço, mas o tbody e o tr o acompanharam. Fazendo algo semelhante com o tbody:

.container {
  width: 500px;
  height: 200px;
  position: relative;
  
  background: #EfEfEf;
}

table {
  position: absolute;
  width: 100%;
  height: 100%;
  
  background: #CC0000;
}

table tbody {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  
  background: green;
}

table tbody tr {
  background: blue;
}
<div class="container">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>Stack Overflow em Português</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Vestibulum tortor nunc, lobortis efficitur eleifend nec, tristique dictum erat</td>
      </tr>
    </tbody>
  </table>
</div>

Perceba que ao definir também o tbody com position: absolute e as dimensões em width e height, o corpo da tabela passa a preencher todo o espaço da div, mas as linhas definidas por tr continuam no tamanho padrão.

-1

No seu elemento: <tr>, adicione o estilo:

line-height: 4px;

npx, na verdade, defina o tamanho que você quiser.

Pode também alterar o padding e margin da tr. E se estiver usando algum estilo pronto, tipo: bootstrap, vai ter que dar uma olhada nos estilos das tds, inclusive.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .