I just got a bug at work where someone in QA put
into content in a table. This is not “real” content, but it did break the layout. The problem is that it is non-breaking and won’t wrap, and tables can only be as thin as their thickest content in each column. If that had been “adfds adfad adfadsfasdf” etc. with spaces, it would have wrapped and been fine. If it had been a normal table, it would have gotten a horizontal scrollbar and been ok, if not beautiful. What is challenging is that the fixed-header and sorting schemes don’t play well with the horizontal scrollbars. I’m still experimenting with all of this.
Also, the Android mobile OS seems to break with the CSS fixed header, but iOS seems the same as the desktop version.
Conclusion: a fixed header table won’t work with a horizontal scroll bar. Assuming there are both horizontal and vertical scroll bars, they should show at the same time so the user knows there is content in both directions. To have both at once, they need to be on the same element. If they are on different elements, one could be scrolled out of sight. In order to have the header fixed, the CSS prevents it from scrolling vertically with the body. Unfortunately, it also doesn’t scroll horizontally with the body.
Sorry for the bad news!
Update 2: I added a second set of test tables to show when the CSS has
What seems to happen (I haven’t tested very thoroughly yet) is that the columns become uniform in width and the content wraps even if it has no spaces. There are still problems with the table headers overlapping if they are long. Unfortunately, it seems like the table-layout: fixed is necessary for the td word-wrap to work. If you want the browser to size column widths to according to their content that’s another problem with this extra CSS.
Support for the hyphens is really spotty but they don’t do any harm. See post on http://www.456bereastreet.com/archive/201204/automatic_line_breaks_in_narrow_columns_with_css_3_hyphens_and_word-wrap/