Отзывчивые таблицы

Примечание:

Эта страница - компонент, используемый на данной вики. Он предназначен для включения в другие страницы.

рейтинг: —
0/0%

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
+ Click here to see above example's code

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 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 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 component:responsive-tables-source-header-cell-start]]
HEADER CELL CONTENT HERE
[[include 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 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 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 component:responsive-tables-source-cell-start|cell-header=CELL HEADER HERE ]]
CELL CONTENT HERE
[[include 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 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 component:responsive-tables-source-responsive-table-end]]

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

Структурные: визуальный_элемент
Филиал: en
версия страницы: 4, Последняя правка: 29 Июнь 2025, 16:19 (0 дней назад)
Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License.