Template:Data Table/Styles.css

/* */

.data-table__cell { text-align: center; } .data-table__cell ol { margin-left: 1.75rem; margin-top: 0; }

.data-table__cell-content--amounts, .data-table__cell-content--description, .data-table__cell-content--icon-list, .data-table__cell-content--list, .data-table__cell-content--link-list, .data-table__cell-content--plural-list, .data-table__cell-content--term-list, .data-table__cell-content--transcript { text-align: left; } .data-table__cell-content--defense, .data-table__cell-content--effect, .data-table__cell-content--mon, .data-table__cell-content--rupees { text-align: left; } .data-table__cell-content--id, .data-table__cell-content--image { font-weight: bold; } .data-table__cell-content--nowrap { white-space: nowrap; } .data-table__cell-content--not-applicable .tooltip { font-weight: bold; text-decoration: none; } .data-table__cell-content--transcript { font-style: italic; } .data-table__cell-content--transcript .tab { font-style: normal; }

.data-table__cell .zw-tabs { display: block; /* zw-tabs is display: table by default but that causes improper alignment when used in data tables */ }

/* Mobile */ .data-table__separator { height: 1.5rem; } .data-table--mobile .data-table__cell { padding: 0.5rem; text-align: left; } .data-table--mobile .data-table__row-header { padding-left: 1rem; padding-right: 1rem; width: 1%; } .data-table--mobile .data-table__cell-content--image { display: flex; align-items: center; gap: 0.5rem; }

/* Forces the mobile version of the table to appear for all screen widths when viewing the wiki on the mobile skin, overriding the size-medium-down class. * On the desktop skin, two tables are loaded. The desktop version is hidden on small screen widths and the mobile one is hidden on large ones. * On mobile we load only the mobile version to reduce loading time and avoid eating up users' cell data unnecessarily. This means we have to override the above hiding behavior. * All of this is because we **can't** assume that all users using the mobile skin have small screens, and all desktop skin users have big screens. * That is, we have to account for situations like users shrinking their windows, or using the mobile skin on a larger tablet. */ body.mw-mf .data-table--mobile { display: block }