This is kind of a mess and I ought to make some special CSS in order to display these examples better.

BlogText custom CSS > BlogText gallery CSS >

Tables with a row full of content will pass off the right-hand side of my template.

Items which are too far to the right should wrap onto the second line.

The CSS ∞

One would think it's remarkably simple:

/* Make single-row tables wrap. */
.entry-content table td {
  display: inline-block;
}

This works with either the simple or the complex MediaWiki-style table syntax.

Text ∞

{|
|-
| 1--01234567890123456789
| 2--01234567890123456789
| 3--01234567890123456789
| 4--01234567890123456789
| 5--01234567890123456789
| 6--01234567890123456789
|}

Pictures ∞

{|
|-
| [[image:Jennifer-Shrader-Lawrence-Vogue-2012.jpg|small|1]]
| [[image:Kacy-Anne-Hill.jpg|small|2]]
| [[image:Jennifer-Shrader-Lawrence-Vogue-2012.jpg|small|3]]
| [[image:Kacy-Anne-Hill.jpg|small|4]]
| [[image:Jennifer-Shrader-Lawrence-Vogue-2012.jpg|small|5]]
| [[image:Kacy-Anne-Hill.jpg|small|6]]
|}

1

2

3

4

5

6

Why this fails ∞

The above is a great idea, but it breaks regular tables.

One idea would be to have the wrapping code only apply to the first table, like so:

.entry-content > table:nth-of-type(1) td {
  display: inline-block;
}

But now the problem becomes having an unmodified table as your first table.

The solution ∞

/* Make single-row tables wrap. */

.entry-content table.single-row td {
  display: inline-block;
}

With text ∞

{| class="single-row"
|-
| 1--01234567890123456789
| 2--01234567890123456789
| 3--01234567890123456789
| 4--01234567890123456789
| 5--01234567890123456789
| 6--01234567890123456789
|}

With images ∞

{|
|-
| [[image:Jennifer-Shrader-Lawrence-Vogue-2012.jpg|small|1]]
| [[image:Kacy-Anne-Hill.jpg|small|2]]
| [[image:Jennifer-Shrader-Lawrence-Vogue-2012.jpg|small|3]]
| [[image:Kacy-Anne-Hill.jpg|small|4]]
| [[image:Jennifer-Shrader-Lawrence-Vogue-2012.jpg|small|5]]
| [[image:Kacy-Anne-Hill.jpg|small|6]]
|}

1

2

3

4

5

6

/* Make specified single-row tables wrap. */
/* Usage
{| class="single-row"
|-
| 1--01234567890123456789
| 2--01234567890123456789
| 3--01234567890123456789
| 4--01234567890123456789
| 5--01234567890123456789
| 6--01234567890123456789
|}
*/
.entry-content table.single-row td {
  display: inline-block;
}