azibi azibi - 4 months ago 4
CSS Question

Rows inside a table grow to use all available height

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

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>

Comments