Oh my god yes! I can't count the number of times I've had to open a thread on a desktop because mobile cut off the content.
I'm also 100% stealing that code for use in my templates, so a huge thank you on that front. Now at least my templates won't break tables :D
Make BBCode [table] mobile-friendly
Forum Index > Core > Suggestions > Under Consideration >
Table of Contents
1. What post authors can do right now 2. Suggestion1. What post authors can do right now
Add this code to your post to make your tables mobile-friendly:[style]
.bbcode_table {
display: inline-block;
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
}
.bbcode_table td,
.bbcode_table th {
white-space: pre
}
[/style]
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! |
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
[style]
.bbcode_table {
display: inline-block;
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
}
.bbcode_table td,
.bbcode_table th {
white-space: pre
}
[/style]
Avatar by Kaelwolfur.
Sent from my PokéNav
As someone who runs the item table guide (who needs to get up and update them sometime this week with this code and the latest item I need to add...*slaps a note to so do tommorow*) I would appreciate this so much. It’s hard to make any new codes without the worry of it becoming not mobile friendly. It’s often why I avoid going past a certain amount of columns because I know at some point it breaks >.>
I've discussed this with Niet and he's on board with this suggestion, so I'll be moving it to approved :D
avatar (c) feveretro
Cannot post: Please log in to post