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.
Table of Contents [hide]
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 |}
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.
Left | Right |
---|---|
1A - A regular table | 1B - with some content |
2A | 2C |
1A - stuff | 1B - goes here |
2A - Long test | 3B - Some long text |
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 |}
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; }