FANDOM


Problem with displaying tables on mobile

  • If the table is wide, viewer have to scroll to see the right columns.
  • Wide columns may become wider than the screen width.
  • Since Wikia removes table styles, tables are not displayed as intended.
  • Wikia automatically adds big margin on the top and bottom of images.
Rank Price Duration Requirement Description
9 Currency Coin 1,250,000 8 days Leadership 8
  • Learn how to train your commander up to level 100
  • Gain fifth squad slot
  • Unlock your commander's third ability
  • Unlock additional Trading research
10 Currency Coin 3,000,000 10 days Leadership 9
  • Learn how to train your commander up to level 110

HTML generated for PC

<table class="article-table" style="width:100%;" border="0" cellpadding="1" cellspacing="1">
<tbody><tr>
<th scope="col"> Rank
</th><th scope="col" style="width:105px;"> Price
</th><th scope="col"> Duration
</th><th scope="col"> Requirement
</th><th scope="col"> Description
</th></tr>
<tr>
<td style="text-align:center;">9
</td><td> <a (…) class="image image-thumbnail" (…)><img (…) class="" (…)></a>1,250,000
(…)
</tbody></table>

HTML generated for Mobile

<div class="bigTable"><table class="article-table">
<tbody><tr>
<th scope="col"> Rank
</th><th scope="col"> Price
</th><th scope="col"> Duration
</th><th scope="col"> Requirement
</th><th scope="col"> Description
</th></tr>
<tr>
<td>9
</td><td><figure class="thumb small"><a (…) class="image" (…)><img (…) class="lazy  small loaded" (…)><noscript><img (…) /></noscript></a></figure>1,250,000
</td>
(…)
</tbody></table></div>

Removed:

  • style="width:100%;" border="0" cellpadding="1" cellspacing="1"
  • style="width:105px;"
  • style="text-align:center;"

Added:

  • <div class="bigTable">
  • <figure class="thumb small"> (for <a> & <img>)
  • class="lazy small loaded" (for <img>)

Changed:

  • class="image image-thumbnail" --> class="image" (for <a>)

Solution 1: No table

Pros

  • Better readability both on mobile and in Source editor.
  • By using section tags, they appear on the table of contents.

Cons

  • On PC, the page gets longer.
  • On mobile, big margin appear on images.

Example

Rank 9

  • Price: Currency Coin 1,250,000
  • Duration: 8 days
  • Requirement: Leadership 8
  • Description:
    • Learn how to train your commander up to level 100
    • Gain fifth squad slot
    • Unlock your commander's third ability
    • Unlock additional Trading research

Rank 10

  • Price: Currency Coin 3,000,000
  • Duration: 10 days
  • Requirement: Leadership 9
  • Description:
    • Learn how to train your commander up to level 110

Example: Page Source

===='''Rank 9'''====
* '''Price''': {{Coin|x20px}} 1,250,000
* '''Duration''': 8 days
* '''Requirement''': Leadership 8
* '''Description''':
** Learn how to train your commander up to level 100
** Gain fifth squad slot
** Unlock your commander's third ability
** Unlock additional Trading research
===='''Rank 10'''====
* '''Price''': {{Coin|x20px}} 3,000,000
* '''Duration''': 10 days
* '''Requirement''': Leadership 9
* '''Description''':
** Learn how to train your commander up to level 110

Solution 2: Reducing the number of columns

  • Removing big info from the table.

Pros

  • Less waste of space in table.
  • Better readability on mobile.

Example

  • Separating the descriptions from the table.

Summary

Rank 9
  • Learn how to train your commander up to level 100
  • Gain fifth squad slot
  • Unlock your commander's third ability
  • Unlock additional Trading research
Rank 10
  • Learn how to train your commander up to level 110

Requirements

Rank Price Currency Coin Duration Precondition
9 1,250,000 8 days Leadership 8
10 3,000,000 10 days Leadership 9

Example: Page Source

===='''Summary'''====
====='''Rank 9'''=====
* Learn how to train your commander up to level 100
* Gain fifth squad slot
* Unlock your commander's third ability
* Unlock additional Trading research
====='''Rank 10'''=====
* Learn how to train your commander up to level 110
===='''Requirements'''====
{| border="0" cellpadding="1" cellspacing="1" class="article-table" style="width:100%;"
|-
! scope="col" style="width:10%; vertical-align:middle; margin:0; padding:0;"| Rank
! scope="col" style="width:10%; vertical-align:middle; margin:0; padding:0;" | Price {{Coin|x20px}}
! scope="col" style="width:10%; vertical-align:middle; margin:0; padding:0;"| Duration
! scope="col" style="width:15%; vertical-align:middle; margin:0; padding:0;"| Precondition
|-
| 9
| 1,250,000
| 8 days
| Leadership 8
|-
| 10
| 3,000,000
| 10 days
| Leadership 9
|}

Solution 3: Using div or span tags with style float:left; or display:inline-block;

Solution 4: Using class: wikia-infobox

  • Abusing wikia's infobox.

Pros

  • On mobile, no big margin on images.

Cons

  • On mobile, wide tables are not displayed as intended.

Example 1

Rank Price Currency Coin Duration Requirement Description
9 1,250,000 8 days Leadership 8 Learn how to train your commander up to level 100

Gain fifth squad slot
Unlock your commander's third ability
Unlock additional Trading research

10 3,000,000 10 days Leadership 9 Learn how to train your commander up to level 110.

Example 1: Page Source

{| class="wikia-infobox" style="width:100%; padding:0; float:none;"
|-
! scope="col" style="width:10%; vertical-align:middle; margin:0; padding:0;"| Rank
! scope="col" style="width:10%; vertical-align:middle; margin:0; padding:0;" | Price {{Coin|x20px}}
! scope="col" style="width:10%; vertical-align:middle; margin:0; padding:0;"| Duration
! scope="col" style="width:15%; vertical-align:middle; margin:0; padding:0;"| Requirement
! scope="col" style="width:55%; vertical-align:middle; margin:0; padding:0;"| Description
|-
| 9
| 1,250,000
| 8 days
| Leadership 8
| Learn how to train your commander up to level 100<br/>
Gain fifth squad slot<br/>
Unlock your commander's third ability<br/>
Unlock additional Trading research<br/>
|-
| 10
| 3,000,000
| 10 days
| Leadership 9
| Learn how to train your commander up to level 110.
|}

Example 2

Evolve Stat Point Time
Icon Evolve 1-1 2.5x 3x +25s
Icon Evolve 2-2 2.5x 3x +25s
Icon Evolve 3-3 2.5x 3x +25s
Icon Evolve 4-4 3x 5x +40s

Example 2: Page Source

{| class="wikia-infobox" style="width:200px; margin:0 0 0 25px; padding:0; float:none;"
|-
! scope="col" style="margin:0; padding:0; vertical-align:middle; text-align:center;"| Evolve
! scope="col" style="margin:0; padding:0; vertical-align:middle; text-align:center;"| Stat
! scope="col" style="margin:0; padding:0; vertical-align:middle; text-align:center;" | Point
! scope="col" style="margin:0; padding:0; vertical-align:middle; text-align:center;"| Time
|-
| scope="col" style="margin:0; padding:0; vertical-align:middle; text-align:center;"|{{Icon|Evolve Level 1|20px}}
| style="margin:0; padding:0; vertical-align:middle; text-align:center;" | 2.5x
| style="margin:0; padding:0; vertical-align:middle; text-align:center;" | 3x
| style="margin:0; padding:0; vertical-align:middle; text-align:center;" | +25s
|-
| scope="col" style="margin:0; padding:0; vertical-align:middle; text-align:center;"|{{Icon|Evolve Level 2|20px}}
| style="margin:0; padding:0; vertical-align:middle; text-align:center;" | 2.5x
| style="margin:0; padding:0; vertical-align:middle; text-align:center;" | 3x
| style="margin:0; padding:0; vertical-align:middle; text-align:center;" | +25s
|-
| scope="col" style="margin:0; padding:0; vertical-align:middle; text-align:center;"|{{Icon|Evolve Level 3|20px}}
| style="margin:0; padding:0; vertical-align:middle; text-align:center;" | 2.5x
| style="margin:0; padding:0; vertical-align:middle; text-align:center;" | 3x
| style="margin:0; padding:0; vertical-align:middle; text-align:center;" | +25s
|-
| scope="col" style="margin:0; padding:0; vertical-align:middle; text-align:center;"|{{Icon|Evolve Level 4|20px}}
| style="margin:0; padding:0; vertical-align:middle; text-align:center;" | 3x
| style="margin:0; padding:0; vertical-align:middle; text-align:center;" | 5x
| style="margin:0; padding:0; vertical-align:middle; text-align:center;" | +40s
|}

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.