Fix broken tables in twentyfifteen WordPress theme

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:

table-layout-directions-broken
Google Maps directions in twentyfifteen theme

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

table-layout-directions-fixed
Google Maps directions without table-layout: fixed

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:

table-layout-syntax-broken
Syntax-coloured code block broken in twentyfifteen

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

table-layout-syntax-fixed
Syntax-coloured code block fixed for twentyfifteen

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!

Facebooktwittergoogle_plusredditlinkedinmailFacebooktwittergoogle_plusredditlinkedinmail
  • Carol McKay

    You will be the undoing of me.

    • I think I undo more things than I do, at least when confronted with other people’s themes :)

  • Just began looking at twenty fifteen and tweaking it to see if I can port my website to it. When I tried to move a page with tables in it, it was messed up and had no clue what was going on. Then I found your article but it solved just a part of it. I have a cell with 2 images in it, both image have a link on them. I cannot get those images to sit side by side, the second image drop on a second line while it’s not the case with my website. I tried to look with Firebug but after over 2 hours lost into this, I’m about to give up. Any idea?