School of Social Work

Table: Plain

No notes defined.

<table class="table--plain" style="width:100%">
    <thead>
        <tr>
            <th scope="col" style="width:30%">&nbsp;</th>
            <th scope="col" style="width:20%">Monday - Thursday</th>
            <th scope="col" style="width:20%">Friday</th>
            <th scope="col" style="width:20%">Saturday</th>
            <th scope="col">Sunday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Room 1</td>
            <td>7 AM - 10 PM</td>
            <td>7 AM - 10 PM</td>
            <td>8 AM - 5 PM</td>
            <td>8 AM - 10 PM</td>
        </tr>
        <tr>
            <td>Room 2</td>
            <td>7 AM - 10 PM</td>
            <td>7 AM - 10 PM</td>
            <td>8 AM - 5 PM</td>
            <td>8 AM - 10 PM</td>
        </tr>
        <tr>
            <td>Lower Level Atrium</td>
            <td>8 AM - 10 PM</td>
            <td>8 AM - 10 PM</td>
            <td>8 AM - 5 PM</td>
            <td>8 AM - 10 PM</td>
        </tr>
        <tr>
            <td>Upper Level Atrium</td>
            <td>8 AM - 10 PM</td>
            <td>8 AM - 10 PM</td>
            <td>8 AM - 5 PM</td>
            <td>8 AM - 10 PM</td>
        </tr>
    </tbody>
</table>
 
<table class="table--plain" style="width:100%">
	<thead>
	<tr>
		<th scope="col" style="width:30%">&nbsp;</th>
		<th scope="col" style="width:20%">Monday - Thursday</th>
		<th scope="col" style="width:20%">Friday</th>
		<th scope="col" style="width:20%">Saturday</th>
		<th scope="col">Sunday</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Room 1</td>
		<td>7 AM - 10 PM</td>
		<td>7 AM - 10 PM</td>
		<td>8 AM - 5 PM</td>
		<td>8 AM - 10 PM</td>
	</tr>
	<tr>
		<td>Room 2</td>
		<td>7 AM - 10 PM</td>
		<td>7 AM - 10 PM</td>
		<td>8 AM - 5 PM</td>
		<td>8 AM - 10 PM</td>
	</tr>
	<tr>
		<td>Lower Level Atrium</td>
		<td>8 AM - 10 PM</td>
		<td>8 AM - 10 PM</td>
		<td>8 AM - 5 PM</td>
		<td>8 AM - 10 PM</td>
	</tr>
	<tr>
		<td>Upper Level Atrium</td>
		<td>8 AM - 10 PM</td>
		<td>8 AM - 10 PM</td>
		<td>8 AM - 5 PM</td>
		<td>8 AM - 10 PM</td>
	</tr>
	</tbody>
</table>
  • 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