CSS - fixed height on tr and fixed height on table?

Question

I need to have a table with rows with a fixed height, and the table itself should have a fixed height. For example, all rows will have a height of 8 pixels, and the table will have a height of 400 pixels. If there are fewer rows than the total height of the table, the rest of the table should be like a gap.

But css automatically reconfigures the row height if I set a fixed height in the table.

I need a 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/

PS Therefore, if I force the height on the table, it ignores the height of the lines. The last tr was without height, so the idea was to automatically resize the filling space.

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

I basically did this by creating a table in CSS, not HTML. This gives a little 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; } 

Real-time example: http://codepen.io/WartClaes/pen/mVxdQg?editors=1100

The only problem here is that td will be higher than 8px, as their contents are larger than that. Is 8px actual height?

Answer 3

I agree with Wart Claes on display divs as table elements versus using the old school table table. But the problem you are facing is that the browser adds the tbody element to your table. This element forces the line height. There are two ways to fix this.

1) Set tbody to display as a block, this will cause the browser to ignore its display properties and do what you need.

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

 tbody{ display:block; } 

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

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

However, doing this will not make your 400px table discretionary. This will make tr be exactly 8px, though.

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

Answer 4

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