Browser cross-compatibility issue with fixed Table Header height
Browser cross-compatibility issue with fixed Table Header height
swells
Posts: 6Questions: 3Answers: 0
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
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
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-heightas well as theheight: 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 addwhite-space: nowrapto the CSS for that block as well, just to make sure that doesn't happen!Regards,
Allan
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: nowrapmesses it up. And without it, of course, we get the double height, as you warned against.Any other ideas?
Thanks!
Hi,
I think I've got it - set the height on the
trelement rather than thethead. That seems to let it do the business: http://live.datatables.net/lavoqaji/6/edit .The
displayproperty for atheadis set to betable-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
Cool. That seemed to work pretty good! Thanks, Allan.