Fixed Table Headers with wide non-breaking content

Last modified date

fancy antique tables

I just got a bug at work where someone in QA put
“adsfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasfasdfasdfasdfasdfasdf”
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.

https://msalzer.com/test/tableOverflow.html

Update: so far all the tables that I’ve tested break with really long non-breaking content. I have not seen a CSS or JavaScript solution that handles it with a fixed header.

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.

The JavaScript methods of creating a fixed header have similar problems.

Sorry for the bad news!

Update 2: I added a second set of test tables to show when the CSS has
table {
table-layout: fixed;
word-wrap: break-word;
-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
}

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/

6 Responses

  1. Hey,

    I started using your code for a table.

    If you wrap the data in the td in a div and set the div’s max-width to the maximum allowed width and then use word-wrap: break-word; then you get fixed table widths without making the rest of your table fixed.

    You also get the column to grow some, but only up until the max-width.

  2. I’m not an expert here by any means, but what about having a div container that holds everything but only scrolls horizontally? Then when you scrolled horizontally, the entire table would move, not just the body or headers. I’m not sure if that would work with the design you have here, but it’s something I thought I’d throw out there for you.

    Excellent solution to this EXTREMELY common (and frustrating!!!) problem!

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.