• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help Trouble with tables on mobile

KageYuuki

KageYuuki

(╯°□°)╯︵ ┻━┻
Roleplay Type(s)
  1. One on One
  2. Group
So I'm working on cobbling together lore and mechanics posts for a future game, and at first it seemed like tables were going to be the best way to organize some of it. It's a bunch of text and images that needed to line up with each other. Like this:

DigiTama Baby In Training Rookie Champion Mega Ultimate
Digitama_Ukkomon.png
Botamon_new_century.png
Koromon_new_century.png
Agumon_New_Century.png
451px-Greymon_New_Century.png
563px-Metal_Greymon_New_Century.png
643px-War_Greymon_New_Century.png

Code: 
[table]
[tr]
	[th]DigiTama[/th]
	[th]Baby[/th]
	[th]In Training[/th]
	[th]Rookie[/th]
	[th]Champion[/th]
	[th]Mega[/th]
	[th]Ultimate[/th]
[/tr]
[tr]
	[th][img]https://wikimon.net/images/2/23/Digitama_Ukkomon.png[/img][/th]
	[th][img]https://wikimon.net/images/f/f5/Botamon_new_century.png[/img][/th]
	[th][img]https://wikimon.net/images/c/cb/Koromon_new_century.png[/img][/th]
	[th][img]https://wikimon.net/images/9/93/Agumon_New_Century.png[/img][/th]
	[th][img]https://wikimon.net/images/thumb/d/dd/Greymon_New_Century.png/451px-Greymon_New_Century.png[/img][/th]
	[th][img]https://wikimon.net/images/thumb/6/63/Metal_Greymon_New_Century.png/563px-Metal_Greymon_New_Century.png[/img][/th]
	[th][img]https://wikimon.net/images/thumb/a/a8/War_Greymon_New_Century.png/643px-War_Greymon_New_Century.png[/img][/th]
[/tr]
[/table]


Or this:



Code: 
[tabs]

[tab=Agumon]

[IMG]https://wikimon.net/images/9/93/Agumon_New_Century.png[/IMG]

[table]
[tr]
    [th][URL='https://wikimon.net/Botamon']Botamon[/URL][/th]
    [th][URL='https://wikimon.net/Koromon']Koromon[/URL][/th]
    [th][URL='https://wikimon.net/Agumon']Agumon[/URL][/th]
    [th][URL='https://wikimon.net/Greymon']Greymon[/URL][/th]
    [th][URL='https://wikimon.net/Metal_Greymon']Metal Greymon[/URL][/th]
    [th][URL='https://wikimon.net/War_Greymon']War Greymon[/URL][/th]
[/tr]
[tr]
    [th][IMG]https://wikimon.net/images/f/f5/Botamon_new_century.png[/IMG][/th]
    [th][IMG]https://wikimon.net/images/c/cb/Koromon_new_century.png[/IMG][/th]
    [th][IMG]https://wikimon.net/images/9/93/Agumon_New_Century.png[/IMG][/th]
    [th][IMG]https://wikimon.net/images/thumb/d/dd/Greymon_New_Century.png/451px-Greymon_New_Century.png[/IMG][/th]
    [th][IMG]https://wikimon.net/images/thumb/6/63/Metal_Greymon_New_Century.png/563px-Metal_Greymon_New_Century.png[/IMG][/th]
    [th][IMG]https://wikimon.net/images/thumb/a/a8/War_Greymon_New_Century.png/643px-War_Greymon_New_Century.png[/IMG][/th]
[/tr]
[/table]
[/tab]


[tab=Gabumon]

[IMG]https://wikimon.net/images/2/22/Gabumon_2_new_century.png[/IMG]

[table]
[tr]
    [th][URL='https://wikimon.net/Punimon']Punimon[/URL][/th]
    [th][URL='https://wikimon.net/Tunomon']Tsunomon[/URL][/th]
    [th][URL='https://wikimon.net/Gabumon']Gabumon[/URL][/th]
    [th][URL='https://wikimon.net/Garurumon']Garurumon[/URL][/th]
    [th][URL='https://wikimon.net/Were_Garurumon']Were Garurumon[/URL][/th]
    [th][URL='https://wikimon.net/Metal_Garurumon']Metal Garurumon[/URL][/th]
[/tr]
[tr]
    [th][IMG]https://wikimon.net/images/a/a7/Punimon_new_century.png[/IMG][/th]
    [th][IMG]https://wikimon.net/images/2/2f/Tunomon_new_century.png[/IMG][/th]
    [th][IMG]https://wikimon.net/images/2/22/Gabumon_2_new_century.png[/IMG][/th]
    [th][IMG]https://wikimon.net/images/thumb/d/d3/Garurumon_New_Century.png/469px-Garurumon_New_Century.png[/IMG][/th]
    [th][IMG]https://wikimon.net/images/thumb/3/33/Were_Garurumon_New_Century.png/402px-Were_Garurumon_New_Century.png[/IMG][/th]
    [th][IMG]https://wikimon.net/images/thumb/3/33/Metal_Garurumon_New_Century.png/414px-Metal_Garurumon_New_Century.png[/IMG][/th]
[/tr]
[/table]
[/tab]
[/tabs]


Which looks just fine on PC. But the moment I looked at it from my phone, I was reminded mobile loves to cut off tables. I normally just run into the issue if they're in a tab, like a stat block for a character sheet. But I guess having images in them causes issues regardless. I have learned that sticking the table in a spoiler helps, but it can be a pain to have to click on a good dozen of them to see everything in a big lore post.

There's probably a better way to do it that I'm overlooking, but I've never really been good at wrapping my head around some of the more advanced BBCode stuff. I tried columns but it really didn't wanna line everything up. (But I could've also just been doing something wrong)

If anyone's got any ideas, I'm all ears.
 
As a disclaimer, I only ever use RPN on my computer, so I'm not at all an expert on making things mobile-friendly, and therefore any ideas I have on the matter should be taken with the appropriate grain of salt, but my first thought would be to put the table into a side-scrolling container.

Not sure if this will work for you or not, but either way I'm happy to try and answer questions/troubleshoot things if I can~

(Also all those digivolutions are making me so nostalgic TwT )


DigiTama Baby In Training Rookie Champion Mega Ultimate
Digitama_Ukkomon.png
Botamon_new_century.png
Koromon_new_century.png
Agumon_New_Century.png
451px-Greymon_New_Century.png
563px-Metal_Greymon_New_Century.png
643px-War_Greymon_New_Century.png
Code: 
[div=margin: auto; width: 300px; border: 1px solid white; overflow-x: scroll;][table]
[tr]
	[th]DigiTama[/th]
	[th]Baby[/th]
	[th]In Training[/th]
	[th]Rookie[/th]
	[th]Champion[/th]
	[th]Mega[/th]
	[th]Ultimate[/th]
[/tr]
[tr]
	[th][img]https://wikimon.net/images/2/23/Digitama_Ukkomon.png[/img][/th]
	[th][img]https://wikimon.net/images/f/f5/Botamon_new_century.png[/img][/th]
	[th][img]https://wikimon.net/images/c/cb/Koromon_new_century.png[/img][/th]
	[th][img]https://wikimon.net/images/9/93/Agumon_New_Century.png[/img][/th]
	[th][img]https://wikimon.net/images/thumb/d/dd/Greymon_New_Century.png/451px-Greymon_New_Century.png[/img][/th]
	[th][img]https://wikimon.net/images/thumb/6/63/Metal_Greymon_New_Century.png/563px-Metal_Greymon_New_Century.png[/img][/th]
	[th][img]https://wikimon.net/images/thumb/a/a8/War_Greymon_New_Century.png/643px-War_Greymon_New_Century.png[/img][/th]
[/tr]
[/table][/div]
 
Last edited:
wrapping the whole code in [div=height:auto; width:100%; overflow-x:auto; overflow-y:hidden;]insert code here[/div] should let you scroll horizontally on mobile:


DigiTama Baby In Training Rookie Champion Mega Ultimate
Digitama_Ukkomon.png
Botamon_new_century.png
Koromon_new_century.png
Agumon_New_Century.png
451px-Greymon_New_Century.png
563px-Metal_Greymon_New_Century.png
643px-War_Greymon_New_Century.png


Code: 
[div=height:auto; width:100%; overflow-x:auto; overflow-y:hidden;]
[table]
[tr]
    [th]DigiTama[/th]
    [th]Baby[/th]
    [th]In Training[/th]
    [th]Rookie[/th]
    [th]Champion[/th]
    [th]Mega[/th]
    [th]Ultimate[/th]
[/tr]
[tr]
    [th][img]https://wikimon.net/images/2/23/Digitama_Ukkomon.png[/img][/th]
    [th][img]https://wikimon.net/images/f/f5/Botamon_new_century.png[/img][/th]
    [th][img]https://wikimon.net/images/c/cb/Koromon_new_century.png[/img][/th]
    [th][img]https://wikimon.net/images/9/93/Agumon_New_Century.png[/img][/th]
    [th][img]https://wikimon.net/images/thumb/d/dd/Greymon_New_Century.png/451px-Greymon_New_Century.png[/img][/th]
    [th][img]https://wikimon.net/images/thumb/6/63/Metal_Greymon_New_Century.png/563px-Metal_Greymon_New_Century.png[/img][/th]
    [th][img]https://wikimon.net/images/thumb/a/a8/War_Greymon_New_Century.png/643px-War_Greymon_New_Century.png[/img][/th]
[/tr]
[/table]
[/div]

not sure if this is what you're looking for but i hope it helps~
 
Ooo the scrollbars definitely solve the issue!

While waiting, I’d thought I’d be clever and slap a height restrict on the images to see if it helped, or at least made them more even looking on PC. The looked more even, but on mobile it did this.

IMG_3347.jpeg

So I’ll probably just slap the scroll bars on across the board and not worry about them not being even looking lmao. Just thought I’d share another example of mobile making things weird.

Thanks for the help!

Ayama said:


(Also all those digivolutions are making me so nostalgic TwT )
Click to expand...

It’s so nostalgic! Very big motivator behind wanting to run a game set there!
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

neverlandeds
Help hi me again (help the code is breaking??)
Replies
9
Views
187
neverlandeds
neverlandeds
The Boneless
Help Help Me Add Borders and a Filter To Existing Code?
Replies
1
Views
161
Uxie
Uxie
nox requiem
Help Looking for character sheet codes in the style of a job application!
Replies
1
Views
100
Idiot Doom Spiral
Idiot Doom Spiral
tar.afe
Help is there a div box tutorial guide?
Replies
2
Views
116
tar.afe
tar.afe
neverlandeds
Help looking for a newspaper-esque character sheet and ic template?
Replies
1
Views
205
Ayama
Ayama
Back
Top