<div class="container">
<div class="table-responsive">
<table class="table--hover-highlight table--gray-borders">
<caption>Tables can have captions now.</caption>
<thead>
<tr>
<th>Person</th>
<th>Number</th>
<th>Third Column</th>
<th>Fourth Column</th>
<th>Fifth Column</th>
<th>Sixth Column</th>
<th>Seventhth Column</th>
<th>Eighth Column</th>
<th>Ninth Column</th>
<th>Tenth Column</th>
<th>Eleventh Column</th>
<th>Twelfth Column</th>
<th>Thirteenth Column</th>
<th>Fourteenth Column</th>
</tr>
</thead>
<tbody>
<tr>
<th>Someone Lastname</th>
<td>900</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>
<a href="#">Person Name</a>
</th>
<td>1200</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Another Person</th>
<td>1500</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>some other person</th>
<td>2800</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Someone and a Lastname</th>
<td>500</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>
<a href="#">Linked Name</a>
</th>
<td>1720</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Another random person</th>
<td>1200</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Some other Person</th>
<td>2200</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Firstname and something</th>
<td>920</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>
<a href="#">Linked Other Name</a>
</th>
<td>1208</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Another Person Randomly selected</th>
<td>1550</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Last One</th>
<td>2830</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
</tbody>
</table>
</div>
<br /><br />
<h2>Responsive table w/ sticky header</h2>
<div class="table-responsive table-sticky">
<table class="table--hover-highlight table--gray-borders">
<caption>Tables can have captions now.</caption>
<thead>
<tr>
<th>Person</th>
<th>Number</th>
<th>Third Column</th>
<th>Fourth Column</th>
<th>Fifth Column</th>
<th>Sixth Column</th>
<th>Seventhth Column</th>
<th>Eighth Column</th>
<th>Ninth Column</th>
<th>Tenth Column</th>
<th>Eleventh Column</th>
</tr>
</thead>
<tbody>
<tr>
<th>Someone Lastname</th>
<td>900</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>
<a href="#">Person Name</a>
</th>
<td>1200</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Another Person</th>
<td>1500</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>some other person</th>
<td>2800</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Someone and a Lastname</th>
<td>500</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>
<a href="#">Linked Name</a>
</th>
<td>1720</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Another random person</th>
<td>1200</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Some other Person</th>
<td>2200</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Firstname and something</th>
<td>920</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>
<a href="#">Linked Other Name</a>
</th>
<td>1208</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Another Person Randomly selected</th>
<td>1550</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
<tr>
<th>Last One</th>
<td>2830</td>
<td>9999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
<td>1999</td>
</tr>
</tbody>
</table>
</div>
<br /><br />
<div class="table-responsive table-sticky">
<table class="table--gray-borders" summary="Undergraduate Cost of Attendence - Living on Campus Example Table">
<thead>
<tr>
<th scope="row"> </th>
<th scope="col">Resident</th>
<th scope="col">Nonresident</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3" scope="row">Estimated Charges</th>
</tr>
<tr>
<th scope="row">Tuition & Fees</th>
<td>$0,000</td>
<td>$00,000</td>
</tr>
<tr>
<th scope="row">Housing & Meals</th>
<td>$00,000</td>
<td>$00,000</td>
</tr>
<tr>
<th scope="row">Subtotal</th>
<td><strong>$00,000</strong></td>
<td><strong>$00,000</strong></td>
</tr>
<tr>
<th colspan="3" scope="row">Other Estimated Expenses</th>
</tr>
<tr>
<th scope="row">Books & Supplies</th>
<td>$000</td>
<td>$000</td>
</tr>
<tr>
<th scope="row">Personal</th>
<td>$0,000</td>
<td>$0,000</td>
</tr>
<tr>
<th scope="row">Transportation</th>
<td>$000</td>
<td>$000</td>
</tr>
<tr>
<th scope="row"><strong>Total</strong></th>
<td><strong>$00,000</strong></td>
<td><strong>$00,000</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
@media screen and (min-width: 40em) {
@media (min-width: 84.375em) {
.container {
max-width: 81.875em;
margin: 0 auto
}
}
}
</style>
table[border] {
border-style: solid;
border-color: #eee; }
table[border] td,
table[border] th {
border-color: #eee; }
table {
background-color: #fff;
border-collapse: collapse;
border-spacing: 0;
color: var(--brand-secondary);
display: inline-block;
font-size: 1.2rem;
line-height: 1.15;
max-width: 100%;
overflow-x: auto;
width: 100%; }
[class*="bg--gray"] table tbody a,
[class*="bg--white"] table tbody a,
[class*="bg--black"] table tbody a,
[class*="bg--gold"] table tbody a,
.bg-pattern--brain-reversed table tbody a,
.bg--gold--pattern--brain table tbody a,
.bg-pattern--brain table tbody a,
.bg--white--pattern--brain table tbody a,
.bg--black--pattern--brain table tbody a,
.bg-pattern--brain-black table tbody a {
color: #00558C; }
@media (min-width: 768px) {
table {
display: table; } }
table p, table ul, table ol {
font-size: 1rem; }
table ul p, table ol p {
margin-bottom: 0; }
table td,
table th {
padding: 1.05rem;
font-size: 1rem; }
table th {
color: var(--brand-secondary); }
table th:not([align]) {
text-align: left; }
table thead th {
background-color: var(--brand-primary);
border: none;
text-transform: uppercase; }
table thead th a {
color: var(--brand-secondary); }
[class*="bg--"] table thead th a {
color: var(--brand-secondary); }
table tbody th {
background-color: #fff;
border: none;
position: static;
left: 0;
padding-left: 1.05rem; }
table tbody tr:not(.is-selected):nth-child(even),
table tbody tr:not(.is-selected):nth-child(even) th {
background-color: #f3f3f3; }
table.table--hover-highlight tbody tr:not(.is-selected):hover,
table.table--hover-highlight tbody tr:not(.is-selected):nth-child(even):hover {
background-color: #fff3c3; }
table.table--hover-highlight tbody tr:not(.is-selected):hover th,
table.table--hover-highlight tbody tr:not(.is-selected):nth-child(even):hover th {
background-color: #fff3c3; }
table caption {
width: 100%;
padding: 1.05rem;
text-align: center;
font-size: 1rem;
color: #fff;
text-transform: uppercase;
background-color: #333;
font-weight: bold; }
table caption a,
table caption :where(p) a:not(.bttn) {
color: var(--brand-primary); }
[class*="bg--"] table caption a,
[class*="bg--"] [class*="bg--"] table caption a, [class*="bg--"]
table caption :where(p) a:not(.bttn),
[class*="bg--"] [class*="bg--"]
table caption :where(p) a:not(.bttn) {
color: var(--brand-primary); }
table tbody tr:last-child td,
table tbody tr:last-child th {
border-bottom-width: 0; }
table thead td,
table thead th {
color: var(--brand-secondary); }
table.table--width-default {
width: unset; }
table.table--width-default caption {
width: unset; }
.table-responsive {
overflow: auto; }
.table-responsive caption {
text-align: left; }
@media (min-width: 768px) {
.table-responsive caption {
text-align: center; } }
.table-responsive.table-sticky {
height: 80vh; }
.table-responsive.table-sticky thead {
position: sticky;
top: 0;
border-top: 0; }
.table-responsive.table-sticky .table--gray-borders thead th {
position: relative; }
.table-responsive.table-sticky .table--gray-borders thead th::before {
content: '';
position: absolute;
left: -1px;
top: 0;
width: calc(100% + 2px);
height: calc(100% + 1px);
border-left: #7c7c7c 1px solid;
border-bottom: #ddd 1px solid; }
.table-responsive.table-sticky .table--gray-borders thead th:first-child:before {
border-left: none; }
.table-responsive table {
display: table; }
table.table--gray-borders > tr > td,
table.table--gray-borders > tr > th,
table.table--gray-borders > tbody > tr > td,
table.table--gray-borders > tbody > tr > th,
table.table--gray-borders > tfoot > tr > td,
table.table--gray-borders > tfoot > tr > th {
border: #ddd 1px solid; }
table.table--gray-borders > thead > tr > td,
table.table--gray-borders > thead > tr > th,
table.table--gray-borders > caption > td,
table.table--gray-borders > caption > th {
border: #7c7c7c 1px solid; }
table.table--gray-borders > thead > tr > td,
table.table--gray-borders > thead > tr > th {
border-bottom: #ddd 1px solid;
border-top: #ddd 1px solid; }
table.table--gray-borders > thead > tr > td:first-child,
table.table--gray-borders > thead > tr > th:first-child {
border-left: #ddd 1px solid; }
table.table--gray-borders > thead > tr > td:last-child,
table.table--gray-borders > thead > tr > th:last-child {
border-right: #ddd 1px solid; }
@import '../../assets/scss/variables';
@import '../../assets/scss/utilities';
//// Table Elements
table[border] {
border-style: solid;
border-color: #eee;
td,
th {
border-color: #eee;
}
}
table {
background-color: $white;
border-collapse: collapse;
border-spacing: 0;
color: $secondary;
display: inline-block;
font-size: $content-font-size;
line-height: 1.15;
max-width: 100%;
overflow-x: auto;
// @todo Add white-space: nowrap?
width: 100%;
tbody a {
[class*="bg--gray"] &,
[class*="bg--white"] &,
[class*="bg--black"] &,
[class*="bg--gold"] &,
.bg-pattern--brain-reversed &,
.bg--gold--pattern--brain &,
.bg-pattern--brain &,
.bg--white--pattern--brain &,
.bg--black--pattern--brain &,
.bg-pattern--brain-black & {
color: $link-color;
}
}
@include breakpoint(sm) {
display: table;
}
p, ul, ol {
font-size: $base-font-size;
}
ul, ol {
p {
margin-bottom: 0;
}
}
td,
th {
padding: $md;
font-size: $base-font-size;
}
th {
color: $secondary;
&:not([align]) {
text-align: left;
}
}
thead th {
background-color: $primary;
border: none;
text-transform: uppercase;
a {
color: $secondary;
[class*="bg--"] & {
color: $secondary;
}
}
}
tbody th {
background-color: #fff;
border: none;
position: static;
left: 0;
padding-left: $md;
}
tbody tr:not(.is-selected):nth-child(even),
tbody tr:not(.is-selected):nth-child(even) th {
background-color: $light;
}
&.table--hover-highlight tbody tr:not(.is-selected),
&.table--hover-highlight tbody tr:not(.is-selected):nth-child(even) {
&:hover {
th {
background-color: #fff3c3
}
background-color: #fff3c3;
}
}
caption {
width: 100%;
padding: 1.05rem;
text-align: center;
font-size: 1rem;
color: #fff;
text-transform: uppercase;
background-color: #333;
font-weight: bold;
a,
:where(p) a:not(.bttn) {
color: $primary;
[class*="bg--"] &,
[class*="bg--"] [class*="bg--"] & {
color: $primary;
}
}
}
tbody tr:last-child td,
tbody tr:last-child th {
border-bottom-width: 0;
}
thead td,
thead th {
color: $secondary;
}
&.table--width-default {
width: unset;
caption {
width: unset;
}
}
}
.table-responsive {
overflow: auto;
caption {
text-align: left;
@include breakpoint(sm) {
text-align: center;
}
}
&.table-sticky {
height: 80vh;
thead {
position: sticky;
top: 0;
border-top: 0;
}
.table--gray-borders {
thead th {
position: relative;
&::before {
content: '';
position: absolute;
left: -1px;
top: 0;
width: calc(100% + 2px);
height: calc(100% + 1px);
border-left: #7c7c7c 1px solid;
border-bottom: #ddd 1px solid;
}
&:first-child:before {
border-left: none;
}
}
}
}
table {
display: table;
}
}
table.table--gray-borders {
& > tr,
& > tbody > tr,
& > tfoot > tr {
& > td,
& > th {
border: #ddd 1px solid;
}
}
& > thead > tr,
& > caption {
& > td,
& > th {
border: #7c7c7c 1px solid;
}
}
& > thead > tr {
& > td,
& > th {
border-bottom: #ddd 1px solid;
border-top: #ddd 1px solid;
&:first-child {
border-left: #ddd 1px solid;
}
&:last-child {
border-right: #ddd 1px solid;
}
}
}
}