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

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>

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?