Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting a max height on a table

I am trying to design a page where there are some tables. It seems that styling tables is much more painful than it ought to be.

The problem is the following: The tables should have a fixed height and display either white space at the bottom (when there is too little content) or a vertical scrollbar (when there is too much). Add to this that the tables have a header which should not scroll.

As far as I know, the thead not scrolling is the default behaviour for tables. And a stretching tfoot could serve well for the purpose of filling with white space. Sadly, it seems that every constraint I can put on the table height is cheerfully ignored. I have tried

table {     height: 600px;     overflow: scroll; } 

I have tried with max-height. I have tried to position the table absolutely and give both the top and bottom coordinates. I have tried to manually edit the height in Firebug to see if it was a problem with CSS specificity. I have tried to set the height on the tbody too. Fact is, the table always stays exactly the same height as its content, regardless of my efforts.

Of course I could fake a table with a div structure, but it actually is a table, and I fear using divs I may run into an issue where some columns may not be properly aligned.

How am I supposed to give a table a height?

like image 778
Andrea Avatar asked Jan 23 '12 10:01

Andrea


People also ask

How do you set the height of a table?

On the Layout tab, in the Cell Size group, click in the Table Row Height box, and then specify the height you want. To use the ruler, select a cell in the table, and then drag the markers on the ruler.

Does Max-height include padding?

The maximum height of the content area of a box. As with height , the maximum height is based on the content area only — any vertical padding , border , or margin will be in addition.

Can I use height and max-height?

The max-height and min-height properties are used to set the maximum and minimum height of an element. This prevents the value of the height property from becoming larger than max-height or smaller than min-height. The value of the max-height and/or min-height property overrides height.


1 Answers

NOTE this answer is now incorrect. I may get back to it at a later time.

As others have pointed out, you can't set the height of a table unless you set its display to block, but then you get a scrolling header. So what you're looking for is to set the height and display:block on the tbody alone:

<table style="border: 1px solid red">     <thead>         <tr>             <td>Header stays put, no scrolling</td>         </tr>     </thead>     <tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">         <tr>             <td>cell 1/1</td>             <td>cell 1/2</td>         </tr>         <tr>             <td>cell 2/1</td>             <td>cell 2/2</td>         </tr>         <tr>             <td>cell 3/1</td>             <td>cell 3/2</td>         </tr>     </tbody> </table> 

Here's the fiddle.

like image 57
Dan Dascalescu Avatar answered Oct 21 '22 14:10

Dan Dascalescu