Single post in Make BBCode [table] mobile-friendly

Table of Contents

1. What post authors can do right now 2. Suggestion

---

1. What post authors can do right now

Add this code to your post to make your tables mobile-friendly: Known Issues: If you have a column where the header text is very long, but the cell contents are very short, the columnn may become wider than you like. That's because the header text is not wrapping automatically. To fix this, you can put your header text on multiple lines. Do this [th]Very Long Text[/th] instead of this [th]Very Long Text[/th]

---

2. Suggestion

When the table is too large to display on a screen, it should scroll horizontally rather than cut off.

Demo

Large table, scrolls:

In	PokéFarm,	you	can	collect	all	kinds	of	Pokémon	Eggs.	With	care,	they	will	develop	and	hatch	into	a	wide	variety	of	Pokémon!
In	PokéFarm,	you	can	collect	all	kinds	of	Pokémon	Eggs.	With	care,	they	will	develop	and	hatch	into	a	wide	variety	of	Pokémon!
In	PokéFarm,	you	can	collect	all	kinds	of	Pokémon	Eggs.	With	care,	they	will	develop	and	hatch	into	a	wide	variety	of	Pokémon!
In	PokéFarm,	you	can	collect	all	kinds	of	Pokémon	Eggs.	With	care,	they	will	develop	and	hatch	into	a	wide	variety	of	Pokémon!
In	PokéFarm,	you	can	collect	all	kinds	of	Pokémon	Eggs.	With	care,	they	will	develop	and	hatch	into	a	wide	variety	of	Pokémon!
In	PokéFarm,	you	can	collect	all	kinds	of	Pokémon	Eggs.	With	care,	they	will	develop	and	hatch	into	a	wide	variety	of	Pokémon!

Short table, no scrolling needed:

In	PokéFarm,
In	PokéFarm,

Arguments

Argument: It is the responsibility of everyone who uses BBCode to make sure it is mobile friendly. Counter-argument: The use of tables is sometimes justified for displaying lots of data. A good example is HowlingCat's popular A List of Items in Tables. So, I don't think we should avoid using large tables as a general rule. Each poster could add the CSS to make it mobile-friendly themselves, but since it is possible to achieve mobile-friendly tables for everyone by default, this would be more convenient. Argument: Could break existing tables Counter-argument: Right now we can put any amount of whitespace between the [table] and [tr] elements and we expect the whitespace to be collapsed. This is something to keep in mind when chaing the rendered HTML or the default CSS, but it is possible to preserve this behaviour. For example:

• Render the table in a scrollable container instead of changing the table's CSS
• Collapse white-space between elements but preserve it inside table cells

So I think the cases where it breaks existing tables should be rare to none. For anyone interested, this is the code I used in the Demo section.