CSS - fixed height on tr and fixed height on table

Question

I need to have table that has rows with fixed height and that table itself must be of fixed height. For example all rows would be of 8px height and table would be of height 400px. If there would be less rows than total height of table, then remaining part of the table should be like a gap.

But css automatically readjusts row height if I set fixed height on table.

I need table to look like this:

|row  |cont  |
|row  |cont  |
|row  |cont  |
|            |
|            |
|            |
|End of table|

I tried this:

CSS:

.t-table {
  border: 1px solid black;
  height: 400px;
  border-collapse: collapse;
}
td {
  border: 1px solid black;
}

HTML:

<table class="t-table">
<tr style="line-height: 8px">
  <td>A</td>
  <td>B</td>
</tr>
<tr style="line-height: 8px">
  <td>1</td>
  <td>2</td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
</table>

Or you can check it here: https://jsfiddle.net/utrwqfux/

P.S. So if I force height on table it will ignore height on rows. Last tr was without height, so the idea was for it to re-size automatically filling empty gap.

Answer 1

I agree with Wart Claes on display divs as table elements vs using old school table layout. But the problem you're running into is that the browser is adding a tbody element into your table. This element is forcing the row height. To fix this there are two ways.

1) Set the tbody to display as block, this will make the browser disregard its display properties and do exactly as you want.

https://jsfiddle.net/benneb10/utrwqfux/1/

tbody{
  display:block;
}

2) Set the table height of the table with the tbody:

tbody{
  height:400px;
  overflow:auto;
  overflow-x:hidden;
  border: 1px solid black;
}

However, doing this won't make your table 400px as you want. It will force the tr to be exactly 8px though.

https://jsfiddle.net/benneb10/utrwqfux/2/

Answer 2

Basically I did this by creating the table in CSS and not in HTML. This give a bit more control.

HTML:

<div class="table">
    <div class="tr">
        <div class="td">A</div>
        <div class="td">B</div>
    </div>
    <div class="tr">
        <div class="td">1</div>
        <div class="td">2</div>
    </div>
</div>

CSS:

.table {
    background: rebeccapurple;
    display: table;
    height: 400px;
    table-layout: fixed;
    width: 400px;
}

.td {
    background: hotpink;
    display: table-cell;
    height: 8px;
    width: 200px;
}

Live example: http://codepen.io/WartClaes/pen/mVxdQg?editors=1100

The only issue here is that the td's will be higher then 8px since their content is bigger then that. Is 8px the actual height?

Answer 3

    .t-table {
     border: 1px solid black;
     height: 400px;
     border-collapse: collapse;
     display: table-cell;
    }
    td {
     border: 1px solid black;
     padding:5px;
    }

https://jsfiddle.net/pf8g49h2/

Answer 4

You can set height:8px to the first and second tr. And remove the middle border from the empty cells in the last tr.

.t-table {
  border: 1px solid black;
  height: 400px;
  border-collapse: collapse;
}
.t-table td {
  border: 1px solid black;
}
.t-table td:empty {
  border-left: 0;
  border-right: 0;
}

<table class="t-table">
  <tr style="line-height: 8px; height: 8px;">
    <td>A</td>
    <td>B</td>
  </tr>
  <tr style="line-height: 8px; height: 8px;">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>