Help:Avoiding nested tables

Desk Mob

Example of nested tables on desktop vs. mobile view

Sometimes, things that look great on desktop can be hard to use on mobile. Nested tables are one of the prime examples of that.

Tip: To see how your edit will look on a phone, add ?useskin=fandommobile to the end of a Fandom URL and resize your window to be similar to a mobile screen.

Why would nested tables be bad?

Tables always try to adapt to the available width. When there is not enough space for width, they grow vertically. If you place another table inside a table, that forces the width of these cells to accommodate the additional table, often making everything too wide.

This causes parts of the content to get cut off, especially on smaller screens like phones and tablets. Users are forced to do a lot of horizontal scrolling to see all the content, which is a bad user experience.

How to fix nested tables

Try to break up a complex table into several simple ones. If you're concerned about preserving the existing layout, you can place them side-by-side — it will allow you to achieve the same effect on a large screen while letting the browser to adjust them if necessary

Finding nested tables

In source mode, tables look like this:

  • Wikitext: {| and |}
  • HTML: <table> and </table>

Therefore, if you encounter another beginning of a table, before you arrive at the closing brackets of first one, that's a nested table This could go down several layers deep.

Example code 1024

The source code example of a nested table

Breaking nested tables down

First, check how many tables are nested within the main table. Focus especially on the furthest nested ones.

Start with the most deeply nested tables (the one inside others) and move it outside of the bigger table - one by one. After each move, use the “Preview” button to check how the table looks on its own. If something looks wrong, check the table settings - the parameters are right after the {| character in the source code.

Once you have pulled all of the inner tables out of the main table, you can delete the outer one.

Keeping your desktop layout

You can place separate tables next to each other (side-by-side) or on top of each other (stacked). On mobile, they’ll move to fit the screen.

One of the biggest challenges that you will face in this stage of positioning your tables is finding a compromise between how they appear on the desktop versus how they appear on the mobile display. This may require adjusting the inline CSS to control how the tables look on the desktop display. Writing CSS into your table wikitext will only affect the desktop version, so the mobile version will still be displayed correctly.

Extra tips

Keep in mind, if a template is being used to display one table for various different pages, fixing the nested table issue on that template will also fix the mobile display for all of the pages that contain the template as well.

Tables with images within individual cells will force the cell to conform to the image size. Therefore, images should be sized down to a mobile-friendly size, or pulled out of table cells entirely. If the image is very large and outside of the table, the mobile browser will automatically size it down to fit in the mobile display.

Brave Frontier community case study

The Brave Frontier community was nice enough to be our guinea pig/co-conspirators in this effort to eradicate nested tables. We were able to successfully find the balance between breaking down nested tables for one of their most important templates (character template) while still preserving the look and feel of their desktop view. The result is a much improved mobile layout for a huge number of articles on their community. See for yourselves:

If you are a more technical admin and would like to see exactly what changes were made to the source code on Brave Frontier to optimize it for mobile display, you can view the source code before and after the changes were made:

Note: this template has been protected to prevent unwanted changes. If you’d like to copy the template for your own use, please copy the code and paste it on your own community or sandbox.

More resources

Further help and feedback