Browser cross-compatibility issue with fixed Table Header height

swells

Hey, Allan!

I'm trying to set a fixed height on a few of our datatables (because they're side by side and the
text of some columns of one of the table's header spans multiple lines...resulting in uneven table
height). I set the following CSS as in the demo here: http://live.datatables.net/lavoqaji/4/edit

#table1 div.dataTables_scrollHeadInner thead {
    height: 10em;
}

Firefox and IE10 seem to display the height as 10em, but Safari, Chrome, and Opera seem to ignore it.

Do you know what CSS setting I could use (or some other way to fix the height of the header row)?

Thanks!

-Scott

allan

Ah - height and tables... Its always a bit of a nightmare and different browsers each want to play differently (although in this case it looks like it is Webkit / Blink that wants to do something different from the others).

A little hack you could use is to set the line-height as well as the height: http://live.datatables.net/lavoqaji/5/edit . One thing to watch out for though, if you have text that wraps it would go double height! You could add white-space: nowrap to the CSS for that block as well, just to make sure that doesn't happen!

Regards,
Allan

swells

Thanks for the quick reply, Allan!

If you look at our example, the headers now don't line up with the rest of the table. The white-space: nowrap messes it up. And without it, of course, we get the double height, as you warned against.

Any other ideas?

Thanks!

allan

Hi,

I think I've got it - set the height on the tr element rather than the thead. That seems to let it do the business: http://live.datatables.net/lavoqaji/6/edit .

The display property for a thead is set to be table-header-group, but the CSS spec doesn't appear to say what the browser should do with it in terms of block layout. I suspect it is being treated as an inline element in Webkit derived browsers and block level in Firefox / IE...

Allan

swells

Cool. That seemed to work pretty good! Thanks, Allan.