Responsive Tables

ERMAHGERD STAHP

This is a template page used internally by the SCP Wiki.

PLEASE DO NOT TOUCH THIS PAGE
WITHOUT STAFF PERMISSION


rating: +9+x

This works on both Sigma 9 (the base Wikidot Theme) and BHL.

EXAMPLE

Sex
Height
Weight/Build
Race
Hair
Eyes
Identifying Attributes
Male
70in
Slender
Caucasian
Black
Brown/Star-shaped Pupils
Cordial disposition
Female
61in
Thin
East Asian
Black
Pale Green
Flamboyantly dressed

IMPORTANT INFORMATION

Components of a Table

TableComponents.jpg

A table consists of a header row followed by a series of content rows. Each of those rows is made up of a series of cells.

HOW TO USE

I apologize in advance for how… much there is for this… I may simplify it in the future. Anyway, for now, this is step by step how to use this component.

  • Step 1: Start the table
  • Step 2: Start the header row
    • Step 2.1: Add a header cell
      Repeat as needed
    • Step 2.2: End the header row
  • Step 3: Start a content row
    • Step 3.1: Add a content cell
      Repeat as needed
    • Step 3.2: End the content row
  • Repeat 3 — 3.2 as needed
  • Step 4: End the table

Step 1: Start the table

This Step only needs to be done once.

Add this include to the top part of your code:

[[include :scp-wiki:component:responsive-tables-source |responsive-table-start= --] ]]

Step 2: Start the header row

This Step can be repeated depending on how many headers you would like.

Add this include:

[[include :scp-wiki:component:responsive-tables-source |header-start= --] ]]

Step 2.1: Add a header cell

This Step can be repeated depending on how many cells you would like in the header row.

Add this include for each cell in your header:

[[include :scp-wiki:component:responsive-tables-source |header-cell-start= --] ]]
HEADER CELL CONTENT HERE
[[include :scp-wiki:component:responsive-tables-source |header-cell-end= --] ]]

Step 2.2: End the header row

This Step should be repeated depending on how many headers you have included.

Add this include to the end of your series of header cells:

[[include :scp-wiki:component:responsive-tables-source |header-end= --] ]]

Step 3: Start a content row

This Step can be repeated depending on how many rows you would like.

Add this include to the start of your content row:

[[include :scp-wiki:component:responsive-tables-source |row-start= --] ]]

Step 3.1: Add a content cell

This Step can be repeated depending on how many cells you would like in the content row. It should be the same number as header cells.

IMPORTANT NOTE: For each cell, the |cell-header= must be the same content as the column header the cell is within. So, in the example above, the second column is "Height" so every cell below it must have |cell-header=Height with the include. If you do not do this, the cell will not have a header on mobile.

Add this include for each cell in your row:

[[include :scp-wiki:component:responsive-tables-source |cell-start= —] |cell-header=CELL HEADER HERE ]]
CELL CONTENT HERE
[[include :scp-wiki:component:responsive-tables-source |cell-end= --] ]]

Step 3.2: End the content row

This Step should be repeated depending on how many rows you have included.

Add this include for each cell in your row:

[[include :scp-wiki:component:responsive-tables-source |row-end= --] ]]

Step 4: End the table

This Step only needs to be done once.

Add this include for each cell in your row:

[[include :scp-wiki:component:responsive-tables-source |responsive-table-end= --] ]]

Over engineered and over-coded? Yes, probably. But it works! :p

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License