WordPress 4.1 brings with it the twentyfifteen theme, which I find to be a rather nice blog theme. Unfortunately, it adds a new wrinkle to any tables on your website — often breaking them! Here’s the simple fix.

The twentyfifteen theme has a couple of CSS rules that can mess up a blog with tables. The first and most important one is table-layout: fixed, which it adds to “[prevent] HTML tables from becoming too wide”. Thanks, but that breaks a bunch of tables. Here’s what it does to Google Maps directions:

Here’s what it’s supposed to look like:

The second one is word-wrap: break-word, which is great, except in such things as preformatted code like you might find on a programmer’s blog. In combination with table-layout: fixed, here’s what it does to some code formatted by SyntaxHighlighter Evolved:

And what it’s meant to look like (yes, with a scroll bar, my preference for code!)

To fix these two problems, just add a little targetted CSS that reverts those settings but only where they are causing problems; they are there for a reason — responsive design — so only turn them off where they are causing a problem. For my map directions, I added this to the map plugin’s CSS:

.flxmap-directions table.adp-placemark,
.flxmap-directions table.adp-directions {
    table-layout: inherit;
}

For the syntax-coloured code blocks, I added this to my child theme’s CSS:

.syntaxhighlighter table {
    table-layout: inherit;
    word-wrap: normal;
}

And job is undone!