Help Getting a Table to Scale

[KageYuuki]

So I'm working on a character sheet that's a little on the stat-heavy side. No big deal, table code to the rescue! Except... tables become unreadable on mobile. Is there any way to get them to scale depending on the screen? Or maybe even add a verticle scroll bar?

On a semirelated note, do tabs and accordions just not play nice with each other? I got them to work together, but the bullet points vanish.

What the code looks like right now.
Name

(Img)

Put something your character would say here charactername

​

• Personal Information
• Combat Information
• Jutsu

• 
  
  Age:
  Former Village:
  Former Rank:
  
  Personality:
  
  History:
  
  
• 
  Skills and Attributes

  	Str	Agi	Per	Int	Stm	Mastery(+2 to a skill of your choice per point)	Ineptitude(-2 to a skill of your choice per -point)	Total
  Attributes	1 to 20	1 to 20	1 to 20	1 to 20	1 to 20	0 to 10	-10 to 0	60
  	Taijutsu	Tools	Stealth	Genjutsu	Ninjutsu	Specialization: (enter name here if unlocked)	Specialization 2: (cannot be unlocked yet)
  Skills	(str+stm)/2	(agi+str)/2	(per+agi)/2	(int+per)/2	(stm+int)/2	(stat+stat)/2	N/A
  Mastery Bonuses/Ineptitude Maluses

  
  Specialization (delete this section if no specialization was taken)
  Name:
  score: (what skill or attributes does your specialization draw from?)
  Description: (describe your specialization's function, strengths and weaknesses)
  
  
  Tools
  Basic Tools
  (List what basic tools such as kunai, or shuriken your character carries and how many. The total size of your loadout, particularly for powerful items such as explosive tags, is governed by your tool stat)
  
  Unique Tools
  (list specialist or unique tools and weapons particular to your character here. Weapons or tools that have supernatural, or otherwise unusual and powerful properties will usually require a jutsu to master, for balancing purposes)
  
  Name
  (what is this tool called?)
  Description
  (What does it do?)
  
  
• 
  
  
  
  jutsu point total
  20
  
  Known Chakra Natures
  What elements are you capable of using?
  
  Canon Jutsu
  

  Rank E

  
  

  • Clone Jutsu
  • Rope Escape Technique
  • Substitution Jutsu
  • Transformation Jutsu

  Rank D

  
  

  • Body Flicker Technique
  • Jutsu Name - (Any additions or changes to it?)

  Rank C

  
  

  Rank B

  
  

  Rank A

  
  

  Rank S

  
  

  
  
  
  Custom Jutsu
  
  

  Rank E

  
  

  • Name: (What's its name?)
    • Type: (What skill governs this jutsu?)
    • Nature: (Fire, Earth, etc)
    • Description: (What does it do? Try to include a weakness)
  • Name: (What's its name?)
    • Type: (What skill governs this jutsu?)
    • Nature: (Fire, Earth, etc)
    • Description: (What does it do? Try to include a weakness)

  Rank D

  
  

  Rank C

  
  

  Rank B

  
  

  Rank A

  
  

  Rank S

  
  

  
  

[h]Name[/h]
[center]
(Img)
[blockquote=charactername]Put something your character would say here[/blockquote][/center]

[tabs]
[tab=Personal Information]

Age:
Former Village:
Former Rank:

Personality: 

History:

[/tab]
[tab=Combat Information]
[h]Skills and Attributes[/h]
[table]
[tr]
   [th][/th]
   [th]Str[/th]
   [th]Agi[/th]
   [th]Per[/th]
   [th]Int[/th]
   [th]Stm[/th]
   [th]Mastery(+2 to a skill of your choice per point)[/th]
[th]Ineptitude(-2 to a skill of your choice per -point)[/th]
[th]Total[/th]
[/tr]
[tr]
   [th]Attributes[/th]
   [td]1 to 20[/td]
   [td]1 to 20[/td]
   [td]1 to 20[/td]
   [td]1 to 20[/td]
   [td]1 to 20[/td]
   [td]0 to 10[/td]
   [td]-10 to 0[/td]
   [td]60[/td]
[/tr]
[tr]
   [th][/th]
   [th]Taijutsu[/th]
   [th]Tools[/th]
   [th]Stealth[/th]
   [th]Genjutsu[/th]
   [th]Ninjutsu[/th]
   [th]Specialization: (enter name here if unlocked)[/th]
[th]Specialization 2: (cannot be unlocked yet)[/th]
[/tr]
[tr]
   [th]Skills[/th]
   [td](str+stm)/2[/td]
   [td](agi+str)/2[/td]
   [td](per+agi)/2[/td]
   [td](int+per)/2[/td]
   [td](stm+int)/2[/td]
   [td](stat+stat)/2[/td]
   [td]N/A[/td]

[/tr]
[tr]
   [th]Mastery Bonuses/Ineptitude Maluses[/th]
   [td][/td]
   [td][/td]
   [td][/td]
   [td][/td]
   [td][/td]
   [td][/td]
   [td][/td]
[/tr]
[/table]

[sh]Specialization[/sh] (delete this section if no specialization was taken)
[I]Name:[/i]
[i]score:[/I] (what  skill or attributes does your specialization draw from?)
[I]Description:[/I] (describe your specialization's function, strengths and weaknesses)


[h]Tools[/h]

[B]Basic Tools[/B]
(List what basic tools such as kunai, or shuriken your character carries and how many. The total size of your loadout, particularly for powerful items such as explosive tags, is governed by your tool stat)

[B]Unique Tools[/B]
(list specialist or unique tools and weapons particular to your character here. Weapons or tools that have supernatural, or otherwise unusual and powerful properties will usually require a jutsu to master, for balancing purposes)

[I]Name[/I]
(what is this tool called?)
[I]Description[/I]
(What does it do?)

[/tab]
[tab=Jutsu]



[B]jutsu point total[/B]
20

Known Chakra Natures
What elements are you capable of using?

[B]Canon Jutsu[/B]
[accordion=bleft|75%]
{slide=Rank E|center}
[LIST]
[*][URL='http://naruto.wikia.com/wiki/Clone_Technique']Clone Jutsu[/URL]
[*][URL='http://naruto.wikia.com/wiki/Rope_Escape_Technique']Rope Escape Technique[/URL]
[*][URL='http://naruto.wikia.com/wiki/Body_Replacement_Technique']Substitution Jutsu[/URL]
[*][URL='http://naruto.wikia.com/wiki/Transformation_Technique']Transformation Jutsu[/URL]
[/LIST]
{/slide}
{slide=Rank D|center}
[LIST]
[*][URL='http://naruto.wikia.com/wiki/Body_Flicker_Technique']Body Flicker Technique[/URL]
[*][URL='http://Naruto wiki...something']Jutsu Name[/URL] - (Any additions or changes to it?)
[/LIST]
{/slide}
{slide=Rank C|center}
[LIST]
[*]
[/LIST]
{/slide}
{slide=Rank B|center}
[LIST]
[*]
[/LIST]
{/slide}
{slide=Rank A|center}
[LIST]
[*]
[/LIST]
{/slide}
{slide=Rank S|center}
[LIST]
[*]
[/LIST]
{/slide}
[/accordion]


[B]Custom Jutsu[/B]

[accordion=bleft|75%]
{slide=Rank E|center}
[LIST]
[*][B]Name: [/B](What's its name?)[list]
[*][B]Type:[/B] (What skill governs this jutsu?)
[*][B]Nature:[/B] (Fire, Earth, etc)
[*][B]Description:[/B] (What does it do? Try to include a weakness)[/list]

[*][B]Name: [/B](What's its name?)[list]
[*][B]Type:[/B] (What skill governs this jutsu?)
[*][B]Nature:[/B] (Fire, Earth, etc)
[*][B]Description:[/B] (What does it do? Try to include a weakness)[/list]
[/LIST]
{/slide}
{slide=Rank D|center}
[LIST]
[*]
[/LIST]
{/slide}
{slide=Rank C|center}
[LIST]
[*]
[/LIST]
{/slide}
{slide=Rank B|center}
[LIST]
[*]
[/LIST]
{/slide}
{slide=Rank A|center}
[LIST]
[*]
[/LIST]
{/slide}
{slide=Rank S|center}
[LIST]
[*]
[/LIST]
{/slide}
[/accordion]
[/tab][/tabs]

 

[Alteras]

Ohh... for something like this, there's almost no way for you to do it using the table tag. You could try to do some magic using columns, but I think you'll be better using CSS and divs or just using another format to display the info.

Also, list tags in general just have weird problems.

 

[KageYuuki]

The list tag does like to do dumb stuff...

Hrmmm though I can't say I'm super knowledgeable in CSS/Divs. Do you know of any tags offhand that could help?

 

[Alteras]

Err... your best bet would be using the columns tag. That's about all I can think of for bbcode atm.

As for divs, probably CSS Grids, or flexbox? The simplest would just be stacking div boxes together as display: inline-block;

 

[KageYuuki]

Oddly enough, sticking the table in a spoiler gives it a scrollbar on mobile. It's a quick and dirty fix, though I'm still trying to see if a CSS Grid would be feasible at all. Players still need to be able to fill out the sheet so I don't wanna go too advanced, y'know?

 

[Fable]

KageYuuki You may want to rework the table to be more vertical than horizontal. It will make the table taller but it's better to scroll on the y axis than the x axis.