Browser cross-compatibility issue with fixed Table Header height

Browser cross-compatibility issue with fixed Table Header height

swellsswells 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

Answers

  • allanallan Posts: 54,579Questions: 1Answers: 8,533 Site admin

    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

  • swellsswells Posts: 6Questions: 3Answers: 0

    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!

  • allanallan Posts: 54,579Questions: 1Answers: 8,533 Site admin
    Answer ✓

    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

  • swellsswells Posts: 6Questions: 3Answers: 0

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

This discussion has been closed.