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 Respostas
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.
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.