Rows inside a table grow to use all available height - html

Question

I am having troubles trying to make this work the way I want.
I have a table with a fixed height. And all tr I put inside this table grow in height to use all available table's height, although tr have a specific height
For example my table has widht: 1000px and if I only have 1 row, this row will be 1000px high, if I have 2 rows, each one will be 500px high
Here is a simple fiddle https://jsfiddle.net/6wfbohbh/2/
table { height:1000px; }
tr {height: 100px; }
How can I have the tr use their heights and not be relative to the tables height?

Answer 1

do not set height unless you need it :
example shrinking header to the height it needs to hold content and let other rows to spray.
table {
height:400px;/* to see demo */
float:left;
border:solid red 1px;
}
/* see tds */
td {border:solid;}
<table>
<thead>
<tr style="height:1%">
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
<tr>
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr style="height:1%">
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
<tr>
<td>Bye</td>
<td>Adios</td>
</tr>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
</tbody>
</table><table>
<thead>
<tr >
<td>no height given on thead tr</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
<tr>
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
that's about what you can do if td's content is even ...
If you want to keep tr's to that 100px height even there is not enough to keep them, then use a pseudo to fake last row:
tbody:after {
content:'';
display:table-row;
height:100%;
}
<table style="height:1000px;">
<thead>
<tr style="1%">
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr style="height: 100px;">
<td>Hello</td>
<td>Hola</td>
</tr>
<tr style="height: 100px;">
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>

Answer 2

I am not sure what you end result should look like, but if you need to specify a width of a container, why dont you use div instead. Here is your updated example:
https://jsfiddle.net/6wfbohbh/8/
<div style="height:1000px; background:lightblue">
<table style="background:lightgreen">
<thead>
<tr>
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr style="height: 50px;">
<td>Hello</td>
<td>Hola</td>
</tr>
<tr style="height: 50px;">
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
</div>