No notes defined.
<div class="overflow-x" style="">
<table class="table--responsive-titles">
<thead>
<tr>
<th>Term</th>
<th>Section</th>
<th>Days</th>
<th>Room</th>
<th>Technical</th>
<th><span class="visually-hidden">Link</span></th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Term">Fall 2020</td>
<td data-title="Section">001</td>
<td data-title="Days">Tuesday/Thursday 8:00 - 2:00</td>
<td data-title="Room">46</td>
<td data-title="Technical">No</td>
<td><a href="#" title="View [name of course here to prevent duplicate links]" class="button button--sm">View Course</a></td>
</tr>
<tr>
<td data-title="Term">Fall 2021</td>
<td data-title="Section">002</td>
<td data-title="Days">Tuesday/Thursday 9:00 - 9:00</td>
<td data-title="Room">2377</td>
<td data-title="Technical">Yes</td>
<td><a href="#" title="View [name of course here to prevent duplicate links]" class="button button--sm">View Course</a></td>
</tr>
<tr>
<td data-title="Term">Fall 2022</td>
<td data-title="Section">003</td>
<td data-title="Days">Tuesday/Thursday 12:30 - 10:00</td>
<td data-title="Room">2131</td>
<td data-title="Technical">Yes</td>
<td><a href="#" title="View [name of course here to prevent duplicate links]" class="button button--sm">View Course</a></td>
</tr>
<tr>
<td data-title="Term">Fall 2023</td>
<td data-title="Section">004</td>
<td data-title="Days">Tuesday/Thursday 4:30 - 11:00</td>
<td data-title="Room">2364</td>
<td data-title="Technical">No</td>
<td><a href="#" title="View [name of course here to prevent duplicate links]" class="button button--sm">View Course</a></td>
</tr>
<tr>
<td data-title="Term">Fall 2024</td>
<td data-title="Section">005</td>
<td data-title="Days">Tuesday/Thursday 6:30 - 3:30</td>
<td data-title="Room">2709</td>
<td data-title="Technical">Yes</td>
<td><a href="#" title="View [name of course here to prevent duplicate links]" class="button button--sm">View Course</a></td>
</tr>
<tr>
<td data-title="Term">Fall 2025</td>
<td data-title="Section">006</td>
<td data-title="Days">Tuesday/Thursday 1:30 - 10:00</td>
<td data-title="Room">1925</td>
<td data-title="Technical">Yes</td>
<td><a href="#" title="View [name of course here to prevent duplicate links]" class="button button--sm">View Course</a></td>
</tr>
<tr>
<td data-title="Term">Fall 2026</td>
<td data-title="Section">007</td>
<td data-title="Days">Tuesday/Thursday 7:00 - 9:30</td>
<td data-title="Room">607</td>
<td data-title="Technical">Yes</td>
<td><a href="#" title="View [name of course here to prevent duplicate links]" class="button button--sm">View Course</a></td>
</tr>
<tr>
<td data-title="Term">Fall 2027</td>
<td data-title="Section">008</td>
<td data-title="Days">Tuesday/Thursday 6:30 - 3:30</td>
<td data-title="Room">2356</td>
<td data-title="Technical">No</td>
<td><a href="#" title="View [name of course here to prevent duplicate links]" class="button button--sm">View Course</a></td>
</tr>
<tr>
<td data-title="Term">Fall 2028</td>
<td data-title="Section">009</td>
<td data-title="Days">Tuesday/Thursday 8:00 - 1:00</td>
<td data-title="Room">618</td>
<td data-title="Technical">No</td>
<td><a href="#" title="View [name of course here to prevent duplicate links]" class="button button--sm">View Course</a></td>
</tr>
</tbody>
</table>
</div>
<div class="overflow-x" style="">
<table class="table--responsive-titles">
<thead>
<tr>
<th>Term</th>
<th>Section</th>
<th>Days</th>
<th>Room</th>
<th>Technical</th>
<th><span class="visually-hidden">Link</span></th>
</tr>
</thead>
<tbody>
{% for i in 1..9 %}
<tr>
<td data-title="Term">Fall 202{{ i - 1 }}</td>
<td data-title="Section">00{{ i }}</td>
<td data-title="Days">Tuesday/Thursday {{ random(12) }}:{{ random(['00', '30']) }} - {{ random(12) }}:{{ random(['00', '30']) }}</td>
<td data-title="Room">{{ random(3000) }}</td>
<td data-title="Technical">{{ random(['Yes', 'No']) }}</td>
<td><a href="#" title="View [name of course here to prevent duplicate links]" class="button button--sm">View Course</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
/*
** See also: '@mixin base-elements' in '__vars/_typography'
** which defines base styles
*/
.overflow-x {
// see _utils
}
$table-responsive-titles-breakpoint: 40rem;
[class^="table--responsive-titles"] {
// give a <td> a data-title attribute to display
// its column heading at small widths
@media (max-width: $table-responsive-titles-breakpoint) {
thead, th {
display: none;
}
tr {
border-bottom: 1px solid $grey--borders;
}
td {
display: block;
padding-top: $spacing-xs;
padding-bottom: $spacing-xs;
&[data-title]::before {
content: attr(data-title) ': ';
font-weight: bold;
padding-right: 0.35em;
}
&:first-child {
padding-top: $spacing-md;
}
&:last-child {
padding-bottom: $spacing-md;
}
}
}
}
.table--plain {
tr {
background: none;
border: none;
}
td {
padding-top: $spacing-xs;
padding-bottom: $spacing-xs;
}
}