GrumpySenpai (talk | contribs) (Apply a border to all article tables.) |
GrumpySenpai (talk | contribs) m |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 6: | Line 6: | ||
empty-cells: show; | empty-cells: show; | ||
margin: 1em 1em 1em 0; /*give it some breathing room around the table but stay left justified*/ | margin: 1em 1em 1em 0; /*give it some breathing room around the table but stay left justified*/ | ||
/*on mobile devices, have the tables scroll independently of the main body content https://stackoverflow.com/questions/19794211/horizontal-scroll-on-overflow-of-table*/ | |||
display: block; | |||
overflow-x: auto; | |||
white-space: nowrap; /*keeps nice spacing within the tables*/ | |||
/*these allow you to still horizontally center tables and prevent it from having undue width which might cover something else beside it*/ | |||
max-width: -moz-fit-content; | |||
max-width: fit-content; | |||
} | } | ||
.article-table td{ | .article-table td, .article-table th{ | ||
border-style: solid; | border-style: solid; | ||
border-width: 0.1em; | border-width: 0.1em; | ||
} | } | ||
.article-table th | .article-short-table th, .article-short-table td{ | ||
border- | /*there are tables for resistances and character stats that are only two rows and looks silly with horizontal borders*/ | ||
border-top: none; | |||
border-bottom: none; | |||
} | |||
.portable-infobox { | |||
border: solid 0.1em; | |||
} | |||
/*In the infobox, the images in the second column will have weird background colors, so change it to transparent*/ | |||
.portable-infobox .pi-horizontal-group-item:nth-child(even) { | |||
background-color: transparent; | |||
} | } | ||
Latest revision as of 22:20, 10 March 2022
/* CSS placed here will be applied to all skins */
.article-table{
/*Tables that are embedded into the articles*/
border-collapse: collapse; /*have the borders around td sections actually touch*/
empty-cells: show;
margin: 1em 1em 1em 0; /*give it some breathing room around the table but stay left justified*/
/*on mobile devices, have the tables scroll independently of the main body content https://stackoverflow.com/questions/19794211/horizontal-scroll-on-overflow-of-table*/
display: block;
overflow-x: auto;
white-space: nowrap; /*keeps nice spacing within the tables*/
/*these allow you to still horizontally center tables and prevent it from having undue width which might cover something else beside it*/
max-width: -moz-fit-content;
max-width: fit-content;
}
.article-table td, .article-table th{
border-style: solid;
border-width: 0.1em;
}
.article-short-table th, .article-short-table td{
/*there are tables for resistances and character stats that are only two rows and looks silly with horizontal borders*/
border-top: none;
border-bottom: none;
}
.portable-infobox {
border: solid 0.1em;
}
/*In the infobox, the images in the second column will have weird background colors, so change it to transparent*/
.portable-infobox .pi-horizontal-group-item:nth-child(even) {
background-color: transparent;
}