MediaWiki:Tables.css: Difference between revisions

From MB Wiki
Jump to navigation Jump to search
(Created page with "→‎BG COLOR Background color to highlight specific columns. Removes the need to use th for first few columns of items in tables.: #mw-content-text .mw-parser-output .tdbg td, #mw-content-text .mw-parser-output .tdbg1 td:nth-child(1), #mw-content-text .mw-parser-output .tdbg2 td:nth-child(2), #mw-content-text .mw-parser-output .tdbg3 td:nth-child(3), #mw-content-text .mw-parser-output .tdbg4 td:nth-child(4), #mw-content-text .mw-parser-output .tdbg5 td:nth-ch...")
 
m (table structure start)
Tag: Replaced
 
(40 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* BG COLOR
/** Table Systems **/
  Background color to highlight specific columns.
.wikitable, .scheduletable {
  Removes the need to use th for first few columns of
    width: auto;
  items in tables.
    min-width: 300px;
*/
    margin: 1.5em auto;
 
    border-collapse: collapse;
#mw-content-text .mw-parser-output .tdbg td,
    border: 1px solid var(--theme-border-color);
#mw-content-text .mw-parser-output .tdbg1 td:nth-child(1),
    background-color: var(--card-bg-main, #fff);
#mw-content-text .mw-parser-output .tdbg2 td:nth-child(2),
    border-radius: 4px;
#mw-content-text .mw-parser-output .tdbg3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdbg4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdbg5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdbg6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdbg7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdbg8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdbg9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdbg10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdbg11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdbg12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdbg13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdbg14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdbg15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdbg16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdbg17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdbg18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdbg19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdbg20 td:nth-child(20) {
background:rgba(var(--theme-page-dynamic-color-1--rgb),.05);
}
 
/* ALIGNMENT
  Styles that can be added to an entire table itself 
  to apply to each cell in the respective column.     
  Removes the need to apply styles to individual cells.
*/
 
#mw-content-text .mw-parser-output .tdl td,
#mw-content-text .mw-parser-output .tdl1 td:nth-child(1),
#mw-content-text .mw-parser-output .tdl2 td:nth-child(2),
#mw-content-text .mw-parser-output .tdl3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdl4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdl5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdl6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdl7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdl8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdl9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdl10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdl11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdl12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdl13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdl14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdl15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdl16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdl17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdl18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdl19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdl20 td:nth-child(20) {
text-align: left;
}
 
#mw-content-text .mw-parser-output .thl th,
#mw-content-text .mw-parser-output .thl1 th:nth-child(1),
#mw-content-text .mw-parser-output .thl2 th:nth-child(2),
#mw-content-text .mw-parser-output .thl3 th:nth-child(3),
#mw-content-text .mw-parser-output .thl4 th:nth-child(4),
#mw-content-text .mw-parser-output .thl5 th:nth-child(5),
#mw-content-text .mw-parser-output .thl6 th:nth-child(6),
#mw-content-text .mw-parser-output .thl7 th:nth-child(7),
#mw-content-text .mw-parser-output .thl8 th:nth-child(8),
#mw-content-text .mw-parser-output .thl9 th:nth-child(9),
#mw-content-text .mw-parser-output .thl10 th:nth-child(10),
#mw-content-text .mw-parser-output .thl11 th:nth-child(11),
#mw-content-text .mw-parser-output .thl12 th:nth-child(12),
#mw-content-text .mw-parser-output .thl13 th:nth-child(13),
#mw-content-text .mw-parser-output .thl14 th:nth-child(14),
#mw-content-text .mw-parser-output .thl15 th:nth-child(15),
#mw-content-text .mw-parser-output .thl16 th:nth-child(16),
#mw-content-text .mw-parser-output .thl17 th:nth-child(17),
#mw-content-text .mw-parser-output .thl18 th:nth-child(18),
#mw-content-text .mw-parser-output .thl19 th:nth-child(19),
#mw-content-text .mw-parser-output .thl20 th:nth-child(20) {
text-align: left;
}
 
#mw-content-text .mw-parser-output .tdc td,
#mw-content-text .mw-parser-output .tdc1 td:nth-child(1),
#mw-content-text .mw-parser-output .tdc2 td:nth-child(2),
#mw-content-text .mw-parser-output .tdc3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdc4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdc5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdc6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdc7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdc8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdc9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdc10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdc11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdc12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdc13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdc14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdc15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdc16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdc17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdc18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdc19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdc20 td:nth-child(20) {
text-align: center;
}
 
#mw-content-text .mw-parser-output .thc th,
#mw-content-text .mw-parser-output .thc1 th:nth-child(1),
#mw-content-text .mw-parser-output .thc2 th:nth-child(2),
#mw-content-text .mw-parser-output .thc3 th:nth-child(3),
#mw-content-text .mw-parser-output .thc4 th:nth-child(4),
#mw-content-text .mw-parser-output .thc5 th:nth-child(5),
#mw-content-text .mw-parser-output .thc6 th:nth-child(6),
#mw-content-text .mw-parser-output .thc7 th:nth-child(7),
#mw-content-text .mw-parser-output .thc8 th:nth-child(8),
#mw-content-text .mw-parser-output .thc9 th:nth-child(9),
#mw-content-text .mw-parser-output .thc10 th:nth-child(10),
#mw-content-text .mw-parser-output .thc11 th:nth-child(11),
#mw-content-text .mw-parser-output .thc12 th:nth-child(12),
#mw-content-text .mw-parser-output .thc13 th:nth-child(13),
#mw-content-text .mw-parser-output .thc14 th:nth-child(14),
#mw-content-text .mw-parser-output .thc15 th:nth-child(15),
#mw-content-text .mw-parser-output .thc16 th:nth-child(16),
#mw-content-text .mw-parser-output .thc17 th:nth-child(17),
#mw-content-text .mw-parser-output .thc18 th:nth-child(18),
#mw-content-text .mw-parser-output .thc19 th:nth-child(19),
#mw-content-text .mw-parser-output .thc20 th:nth-child(20) {
text-align: center;
}
 
#mw-content-text .mw-parser-output .tdr td,
#mw-content-text .mw-parser-output .tdr1 td:nth-child(1),
#mw-content-text .mw-parser-output .tdr2 td:nth-child(2),
#mw-content-text .mw-parser-output .tdr3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdr4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdr5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdr6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdr7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdr8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdr9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdr10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdr11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdr12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdr13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdr14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdr15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdr16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdr17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdr18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdr19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdr20 td:nth-child(20) {
text-align: right;
}
 
#mw-content-text .mw-parser-output .thr th,
#mw-content-text .mw-parser-output .thr1 th:nth-child(1),
#mw-content-text .mw-parser-output .thr2 th:nth-child(2),
#mw-content-text .mw-parser-output .thr3 th:nth-child(3),
#mw-content-text .mw-parser-output .thr4 th:nth-child(4),
#mw-content-text .mw-parser-output .thr5 th:nth-child(5),
#mw-content-text .mw-parser-output .thr6 th:nth-child(6),
#mw-content-text .mw-parser-output .thr7 th:nth-child(7),
#mw-content-text .mw-parser-output .thr8 th:nth-child(8),
#mw-content-text .mw-parser-output .thr9 th:nth-child(9),
#mw-content-text .mw-parser-output .thr10 th:nth-child(10),
#mw-content-text .mw-parser-output .thr11 th:nth-child(11),
#mw-content-text .mw-parser-output .thr12 th:nth-child(12),
#mw-content-text .mw-parser-output .thr13 th:nth-child(13),
#mw-content-text .mw-parser-output .thr14 th:nth-child(14),
#mw-content-text .mw-parser-output .thr15 th:nth-child(15),
#mw-content-text .mw-parser-output .thr16 th:nth-child(16),
#mw-content-text .mw-parser-output .thr17 th:nth-child(17),
#mw-content-text .mw-parser-output .thr18 th:nth-child(18),
#mw-content-text .mw-parser-output .thr19 th:nth-child(19),
#mw-content-text .mw-parser-output .thr20 th:nth-child(20) {
text-align: right;
}
 
#mw-content-text .mw-parser-output .tdt td,
#mw-content-text .mw-parser-output .tdt1 td:nth-child(1),
#mw-content-text .mw-parser-output .tdt2 td:nth-child(2),
#mw-content-text .mw-parser-output .tdt3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdt4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdt5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdt6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdt7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdt8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdt9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdt10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdt11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdt12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdt13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdt14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdt15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdt16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdt17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdt18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdt19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdt20 td:nth-child(20) {
vertical-align: top;
}
 
#mw-content-text .mw-parser-output .tht th,
#mw-content-text .mw-parser-output .tht1 th:nth-child(1),
#mw-content-text .mw-parser-output .tht2 th:nth-child(2),
#mw-content-text .mw-parser-output .tht3 th:nth-child(3),
#mw-content-text .mw-parser-output .tht4 th:nth-child(4),
#mw-content-text .mw-parser-output .tht5 th:nth-child(5),
#mw-content-text .mw-parser-output .tht6 th:nth-child(6),
#mw-content-text .mw-parser-output .tht7 th:nth-child(7),
#mw-content-text .mw-parser-output .tht8 th:nth-child(8),
#mw-content-text .mw-parser-output .tht9 th:nth-child(9),
#mw-content-text .mw-parser-output .tht10 th:nth-child(10),
#mw-content-text .mw-parser-output .tht11 th:nth-child(11),
#mw-content-text .mw-parser-output .tht12 th:nth-child(12),
#mw-content-text .mw-parser-output .tht13 th:nth-child(13),
#mw-content-text .mw-parser-output .tht14 th:nth-child(14),
#mw-content-text .mw-parser-output .tht15 th:nth-child(15),
#mw-content-text .mw-parser-output .tht16 th:nth-child(16),
#mw-content-text .mw-parser-output .tht17 th:nth-child(17),
#mw-content-text .mw-parser-output .tht18 th:nth-child(18),
#mw-content-text .mw-parser-output .tht19 th:nth-child(19),
#mw-content-text .mw-parser-output .tht20 th:nth-child(20) {
vertical-align: top;
}
 
#mw-content-text .mw-parser-output .tdm td,
#mw-content-text .mw-parser-output .tdm1 td:nth-child(1),
#mw-content-text .mw-parser-output .tdm2 td:nth-child(2),
#mw-content-text .mw-parser-output .tdm3 td:nth-child(3),
#mw-content-text .mw-parser-output .tdm4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdm5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdm6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdm7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdm8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdm9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdm10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdm11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdm12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdm13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdm14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdm15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdm16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdm17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdm18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdm19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdm20 td:nth-child(20) {
vertical-align: middle;
}
 
#mw-content-text .mw-parser-output .thm th,
#mw-content-text .mw-parser-output .thm1 th:nth-child(1),
#mw-content-text .mw-parser-output .thm2 th:nth-child(2),
#mw-content-text .mw-parser-output .thm3 th:nth-child(3),
#mw-content-text .mw-parser-output .thm4 th:nth-child(4),
#mw-content-text .mw-parser-output .thm5 th:nth-child(5),
#mw-content-text .mw-parser-output .thm6 th:nth-child(6),
#mw-content-text .mw-parser-output .thm7 th:nth-child(7),
#mw-content-text .mw-parser-output .thm8 th:nth-child(8),
#mw-content-text .mw-parser-output .thm9 th:nth-child(9),
#mw-content-text .mw-parser-output .thm10 th:nth-child(10),
#mw-content-text .mw-parser-output .thm11 th:nth-child(11),
#mw-content-text .mw-parser-output .thm12 th:nth-child(12),
#mw-content-text .mw-parser-output .thm13 th:nth-child(13),
#mw-content-text .mw-parser-output .thm14 th:nth-child(14),
#mw-content-text .mw-parser-output .thm15 th:nth-child(15),
#mw-content-text .mw-parser-output .thm16 th:nth-child(16),
#mw-content-text .mw-parser-output .thm17 th:nth-child(17),
#mw-content-text .mw-parser-output .thm18 th:nth-child(18),
#mw-content-text .mw-parser-output .thm19 th:nth-child(19),
#mw-content-text .mw-parser-output .thm20 th:nth-child(20) {
vertical-align: middle;
}
}


#mw-content-text .mw-parser-output .tdb td,
.wikitable > tr > th, .wikitable > * > tr > th {
#mw-content-text .mw-parser-output .tdb1 td:nth-child(1),
    background-color: var(--gold-accent) !important;
#mw-content-text .mw-parser-output .tdb2 td:nth-child(2),
    color: #1a2a2a !important;
#mw-content-text .mw-parser-output .tdb3 td:nth-child(3),
    padding: 0.5em 1em;
#mw-content-text .mw-parser-output .tdb4 td:nth-child(4),
#mw-content-text .mw-parser-output .tdb5 td:nth-child(5),
#mw-content-text .mw-parser-output .tdb6 td:nth-child(6),
#mw-content-text .mw-parser-output .tdb7 td:nth-child(7),
#mw-content-text .mw-parser-output .tdb8 td:nth-child(8),
#mw-content-text .mw-parser-output .tdb9 td:nth-child(9),
#mw-content-text .mw-parser-output .tdb10 td:nth-child(10),
#mw-content-text .mw-parser-output .tdb11 td:nth-child(11),
#mw-content-text .mw-parser-output .tdb12 td:nth-child(12),
#mw-content-text .mw-parser-output .tdb13 td:nth-child(13),
#mw-content-text .mw-parser-output .tdb14 td:nth-child(14),
#mw-content-text .mw-parser-output .tdb15 td:nth-child(15),
#mw-content-text .mw-parser-output .tdb16 td:nth-child(16),
#mw-content-text .mw-parser-output .tdb17 td:nth-child(17),
#mw-content-text .mw-parser-output .tdb18 td:nth-child(18),
#mw-content-text .mw-parser-output .tdb19 td:nth-child(19),
#mw-content-text .mw-parser-output .tdb20 td:nth-child(20) {
vertical-align: bottom;
}
}


#mw-content-text .mw-parser-output .thb th,
/* Schedule Specific Positioning */
#mw-content-text .mw-parser-output .thb1 th:nth-child(1),
.scheduletable td:first-child {
#mw-content-text .mw-parser-output .thb2 th:nth-child(2),
    width: 150px !important;
#mw-content-text .mw-parser-output .thb3 th:nth-child(3),
    font-weight: 600;
#mw-content-text .mw-parser-output .thb4 th:nth-child(4),
    background-color: rgba(56, 178, 172, 0.08);
#mw-content-text .mw-parser-output .thb5 th:nth-child(5),
    border-right: 2px solid var(--teal-300);
#mw-content-text .mw-parser-output .thb6 th:nth-child(6),
#mw-content-text .mw-parser-output .thb7 th:nth-child(7),
#mw-content-text .mw-parser-output .thb8 th:nth-child(8),
#mw-content-text .mw-parser-output .thb9 th:nth-child(9),
#mw-content-text .mw-parser-output .thb10 th:nth-child(10),
#mw-content-text .mw-parser-output .thb11 th:nth-child(11),
#mw-content-text .mw-parser-output .thb12 th:nth-child(12),
#mw-content-text .mw-parser-output .thb13 th:nth-child(13),
#mw-content-text .mw-parser-output .thb14 th:nth-child(14),
#mw-content-text .mw-parser-output .thb15 th:nth-child(15),
#mw-content-text .mw-parser-output .thb16 th:nth-child(16),
#mw-content-text .mw-parser-output .thb17 th:nth-child(17),
#mw-content-text .mw-parser-output .thb18 th:nth-child(18),
#mw-content-text .mw-parser-output .thb19 th:nth-child(19),
#mw-content-text .mw-parser-output .thb20 th:nth-child(20) {
vertical-align: bottom;
}
}

Latest revision as of 11:54, 25 March 2026

/** Table Systems **/
.wikitable, .scheduletable {
    width: auto;
    min-width: 300px;
    margin: 1.5em auto;
    border-collapse: collapse;
    border: 1px solid var(--theme-border-color);
    background-color: var(--card-bg-main, #fff);
    border-radius: 4px;
}

.wikitable > tr > th, .wikitable > * > tr > th {
    background-color: var(--gold-accent) !important;
    color: #1a2a2a !important;
    padding: 0.5em 1em;
}

/* Schedule Specific Positioning */
.scheduletable td:first-child {
    width: 150px !important;
    font-weight: 600;
    background-color: rgba(56, 178, 172, 0.08);
    border-right: 2px solid var(--teal-300);
}
Retrieved from "https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tables.css&oldid=28378"