%usa-table {
@include border-box-sizing; @include typeset; border-collapse: collapse; border-spacing: 0; color: color($theme-table-text-color); margin: units(2.5) 0; text-align: left; thead { th { font-weight: fw("bold"); } th, td { background-color: color($theme-table-header-background-color); color: color($theme-table-header-text-color); } } th, td { @include u-border(1px, $theme-table-border-color); background-color: color("white"); font-weight: fw("normal"); padding: units(1) units(2); text-align: inherit; } caption { @include u-font("body", "xs"); font-weight: fw("bold"); margin-bottom: units(1.5); text-align: left; }
}
%usa-table–borderless {
thead { th { background-color: transparent; border-top: 0; } } th, td { border-left: 0; border-right: 0; }
}
%usa-table–compact {
th, td { padding: units(0.5) units(1.5); }
}
%usa-table–striped {
tbody { tr:nth-child(odd) { td, th { background-color: color($theme-table-stripe-background-color); color: color($theme-table-stripe-text-color); } } }
}
@mixin table-stacked-styles {
thead { display: none; } th, td { border-bottom-width: 0; display: block; width: 100%; } tr { @include u-border-bottom(0.5, $theme-table-border-color); border-top-width: 0; display: block; width: 100%; th:first-child, td:first-child { border-top-width: 0; } &:nth-child(odd) { td, th { background-color: inherit; } } &:first-child { th:first-child, td:first-child { @include u-border-top(0.5, $theme-table-border-color); } } } th[data-label], td[data-label] { padding-bottom: units(1.5); &:before { content: attr(data-label); display: block; font-weight: fw("bold"); margin: units(-1) units(-2) units(0); padding: units(1.5) units(2) units(0.5); } }
}
@mixin table-stacked-header-styles {
tr { td:first-child, th:first-child { @include typeset( $theme-body-font-family, $theme-h4-font-size, $theme-heading-line-height ); background-color: color($theme-table-header-background-color); color: color($theme-table-header-text-color); font-weight: fw("bold"); padding: units(1.5) units(2); &:before { display: none; } } }
}
%usa-table–stacked {
@include table-stacked-styles;
}
%usa-table–stacked-header {
@include table-stacked-styles; @include table-stacked-header-styles;
}
%usa-table-container–scrollable {
margin: units(2.5) 0; overflow-y: hidden; .usa-table { margin: 0; } th, td { white-space: nowrap; }
}