What's new

Help Getting a Table to Scale

KageYuuki

(╯°□°)╯︵ ┻━┻
#1
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



  • Age:
    Former Village:
    Former Rank:

    Personality:

    History:



Code:
[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

The Sleepy One
Moderator
Supporter
#2
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

(╯°□°)╯︵ ┻━┻
#3
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

The Sleepy One
Moderator
Supporter
#4
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

(╯°□°)╯︵ ┻━┻
#5
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?
 

Fyuri

積ん読
Administrator
Supporter
#6
@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.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top