Display table CSS prevents IE users from selecting text — 22 Nov 2013

While helping a client optimise his website post launch, I ran into a strange issue with IE: users of IE 7-10 couldn't select (highlight) some parts of the page (duh).

As this isn't something I check when running cross-browser tests, I missed it.

It turns out that it was linked to the use of CSS property display:table.

This property was used to change the stacking (or source) order of certain parts of the page when the viewport changes size. A set of links situated in the header on desktop width, jumps down to the footer when the screen narrows down to smartphone width.

Flexbox will take care of this one day, but in the meantime, using display:table does the trick. The idea is to set the order with display:table-header-group (aka thead) and display:table-footer-group (aka tfoot). Checkout Chris Coyier's post for a complete guide of the table element.

Consider the following source order:

  wrapper
inner
nav
links
/nav
content
text
/content
/inner
tools
links
/tools
/wrapper

By assigning display:table to the wrapper block, display:table-footer-group to the inner block and display:table-header-group to the tools block, we are able to display the tools top right on large viewports, while having at the bottom on narrow screens. Jeremy Keith presents this technique in a blog post and Brad Frost lists it as Table cell source order in his Responsive Pattern Library.

This works fine, except that we discovered that IE<11 users couldn't select text in the display:table-footer-group.

By changing display:table-footer-group to display:table-cell (display:table-row isn't required) the text becomes selectable again.

Checkout the following pages in IE (<11) for a demo:

• Can't select text: display:table-footer-group
• Can select text: display:table-cell

Somehow, a display:table element with no display:table-cell elements behaves strangely, preventing text selection.