School of Social Work

Table: Responsive Titles Plain

No notes defined.

<div class="overflow-x">
    <table class="table--responsive-titles  table--plain" style="width: 100%">
        <thead>
            <tr>
                <th>Term</th>
                <th>Section</th>
                <th>Days</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 7:00 - 8:30</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 5:30 - 6:00</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 8:00 - 0:00</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 7:00 - 11:30</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 - 4:30</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 0:00 - 6:30</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 9:30 - 5:30</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 8:00 - 3:00</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 10:00 - 10:00</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">
	<table class="table--responsive-titles  table--plain" style="width: 100%">
		<thead>
		<tr>
			<th>Term</th>
			<th>Section</th>
			<th>Days</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><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>
  • Content: 
    /*
** 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;
	}
}
  • URL: /components/raw/table/_tables.scss
  • Filesystem Path: web/themes/custom/um-ssw/components/table/_tables.scss
  • Size: 912 Bytes