Guild Wars 2 Wiki:Projects/CSS documentation/template tables- vector

/** TABLE CLASSES **/
.table {
    border: 0 solid;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.9230769231em;
    text-align: left;
    clear: none;
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 10px 0;
    padding: 0;
    background-color: #36393F; /* color scheme: page gray */
}

.table::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    height: 3px;
    background-image: url("/images/4/45/Shadow_after.png");
    background-size: 100% 3px;
}

.table::after {
    bottom: -4px;
}

.table > caption {
    font-weight: bold;
}

.table tr {
    text-align: left;
}

.table > * > tr > :first-child {
    border-left-width: 1px;
    border-left-style: solid;
}

.table > * > tr > :last-child {
    border-right-width: 1px;
    border-right-style: solid;
}

.table > tbody > tr:last-child,
.table > tbody > tr:last-child > *,
.table > tfoot > tr:last-child > * {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.table > tbody:first-child > tr:first-child > *,
.table > tbody > tr.heading > *,
.table > thead > tr:first-child > * {
    padding: 0.5em;
}

.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th {
    line-height: 1.667em;
    padding: 0.25em 0.5em;
}

.table tr > th,
.table[class*="center"] tr {
    text-align: center;
}

.table[class*="left"] tr {
    text-align: left;
}

.table[class*="right"] tr {
    text-align: right;
}

.table[class*="middle"] tr {
    vertical-align: middle;
}

.table[class*="top"] tr {
    vertical-align: top;
}

.table[class*="bottom"] tr {
    vertical-align: bottom;
}

.table > :first-child > tr:first-child,
.table > tbody > tr.heading {
    border-width: 1px;
    border-style: solid;
}

.table > tbody > tr:nth-child(odd) {
    background-color: rgba(23, 23, 23, 0.15);
}

.table.no-odd-even > tbody > tr:nth-child(odd) {
    background-color: unset;
}

.table > tbody,
.table > tbody > tr.heading,
.table > thead > tr,
.table > tbody > tr > [rowspan],
.table > tbody > tr > [colspan] {
    border-width: 1px;
    border-style: solid;
}

.table > :first-child > tr:first-child + tr [rowspan],
.table > :first-child > tr:first-child + tr [colspan] {
    border-top-width: 0;
}

.table .line,
.table .line-bottom {
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.table .line-top {
    border-top-width: 2px;
    border-top-style: solid;
}

.table .line-left {
    border-left-width: 1px;
    border-left-style: solid;
}

.table .line-right {
    border-right-width: 1px;
    border-right-style: solid;
}

.table table {
    background-color: transparent;
    padding: 0;
    margin: 0;
}

dl + table.table {
    margin-top: 0;
}

/* Remove after shadow for tables that have been centered, otherwise the shadow spans the entire page */
.table[class*="center"]::after,
.table.noshadowafter::after {
    background-image: none;
}

/* Skills tables */
.table.skills {
    width: 100%;
    max-width: 100em;
    display: table;
}

.table.skills > :first-child > tr:first-child ~ tr th[colspan] {
    text-align: left;
}

.table.skills > :first-child > tr:first-child ~ tr th[colspan] span.editsection {
    display: none;
}

.table.skills > :first-child > tr:first-child ~ tr th[colspan] h4 {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.table.skills > * > tr > td,
.table.skills > * > tr > th {
    border-left-width: 0px;
    border-right-width: 0px;
}

.table.skills tr.elementalist th,
.table.skills tr.engineer th,
.table.skills tr.guardian th,
.table.skills tr.mesmer th,
.table.skills tr.necromancer th,
.table.skills tr.ranger th,
.table.skills tr.revenant th,
.table.skills tr.thief th,
.table.skills tr.warrior th,
.table.skills tr.asura th,
.table.skills tr.charr th,
.table.skills tr.human th,
.table.skills tr.norn th,
.table.skills tr.sylvari th {
    border-top-width: 2px;
    border-bottom-width: 2px;
}

/* Remove top/bottom margins from lists within fine/masterwork or craftvariants tables */
.table.fm dl,
.table.craftvariants dl {
    margin-top: 0;
    margin-bottom: 0;
}

/* No left margin when used purely for structure within these tables */
.table.locations dd,
.table.fm dd,
table.craftvariants dd {
    margin-left: 0;
}

/* but restore margin if it's actually being used as a definition list */
.table.locations dl > dt ~ dd {
    margin-left: 2em;
}

/* Using * lists within combo tables */
.table.combo ul {
    margin: 0.15em 0;
}

.table.combo li {
    display: block;
}

/* Restore sort icons for sortable table headers */
table.jquery-tablesorter th.headerSort {
    padding: 0.5em;
    padding-right: 21px;
}

.table.skills tr.elementalist th,
.table.skills tr.engineer th,
.table.skills tr.guardian th,
.table.skills tr.mesmer th,
.table.skills tr.necromancer th,
.table.skills tr.ranger th,
.table.skills tr.revenant th,
.table.skills tr.thief th,
.table.skills tr.warrior th,
.table.skills tr.asura th,
.table.skills tr.charr th,
.table.skills tr.human th,
.table.skills tr.norn th,
.table.skills tr.sylvari th {
    background-color: #1A1A1A;
}

.table > tbody > tr.heading,
.table > tbody > tr > th,
.table > tfoot > tr > th {
    background-color: #40434A; /* color scheme: inactive tabs */
}

.table > tbody:first-child > tr:first-child > *,
.table > tbody > tr.heading > *,
.table > thead > tr:first-child > *,
.table > :first-child > tr:first-child {
    background-color: #1A1A1A; /* color scheme: super dark */
}

.table tr,
.table > * > tr > :first-child,
.table > * > tr > :last-child,
.table > tbody > tr:last-child,
.table > tbody > tr:last-child > *,
.table > tfoot > tr:last-child > *,
.table > tbody:first-child > tr:first-child > *,
.table > tbody > tr.heading > *,
.table > thead > tr:first-child > *,
.table > :first-child > tr:first-child,
.table > tbody > tr.heading,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > tbody > tr:nth-child(odd),
.table > tbody,
.table > tbody > tr.heading,
.table > thead > tr,
.table > tbody > tr > [rowspan],
.table > tbody > tr > [colspan],
.table .line,
.table .line-bottom,
.table .line-top,
.table .line-left,
.table .line-right {
    border-color: #5A5C5E; /* color scheme: gray page border */
}