Possible responsive table solution
The first thing that came to mind yesterday when thinking about how to approach making a table responsive was to provide two versions of the table within the HTML of the page, and then simply show the appropriate version at certain breakpoints. I’m not sure how this might affect the accessibility of the tables if both are included, but I believe this may be a possible solution.
| 0800 to 1200 |
1200 to 1600 |
1600 to 2000 |
|
|---|---|---|---|
| Mon. | Mark | Alex | Beth |
| Tues. | Mark | Alex | Beth |
| Wed. | Mark | Alex | Mark |
| Thurs. | Mark | Alex | Mark |
| Fri. | Mark | Beth | Alex |
| Sat. | Alex | Beth | Alex |
| Sun. | Alex | Beth | Alex |
| Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | Sunday | |
|---|---|---|---|---|---|---|---|
| 0800–1200 | Mark | Mark | Mark | Mark | Mark | Alex | Alex |
| 1200–1600 | Alex | Alex | Alex | Alex | Beth | Beth | Beth |
| 1600–2000 | Beth | Beth | Mark | Mark | Alex | Alex | Alex |
View the code:
HTML and JS
<div class="code-block">
<table class="narrow-table">
<caption>Staff schedule for Barry's Barnacle Broiler</caption><!-- <caption> Must be placed after initial table element -->
<tr>
<td></td>
<th scope="row">0800 to <br>1200</th>
<th scope="row">1200 to <br>1600</th>
<th scope="row">1600 to <br>2000</th>
</tr>
<tr>
<th scope="col">Mon.</td>
<td class="label-mark">Mark</td>
<td class="label-alex">Alex</td>
<td class="label-beth">Beth</td>
</tr>
<tr>
<th scope="col">Tues.</td>
<td class="label-mark">Mark</td>
<td class="label-alex">Alex</td>
<td class="label-beth">Beth</td>
</tr>
<tr>
<th scope="col">Wed.</td>
<td class="label-mark">Mark</td>
<td class="label-alex">Alex</td>
<td class="label-mark">Mark</td>
</tr>
<tr>
<th scope="col">Thurs.</td>
<td class="label-mark">Mark</td>
<td class="label-alex">Alex</td>
<td class="label-mark">Mark</td>
</tr>
<tr>
<th scope="col">Fri.</td>
<td class="label-mark">Mark</td>
<td class="label-beth">Beth</td>
<td class="label-alex">Alex</td>
</tr>
<tr>
<th scope="col">Sat.</td>
<td class="label-alex">Alex</td>
<td class="label-beth">Beth</td>
<td class="label-alex">Alex</td>
</tr>
<tr>
<th scope="col">Sun.</td>
<td class="label-alex">Alex</td>
<td class="label-beth">Beth</td>
<td class="label-alex">Alex</td>
</tr>
</table>
<table class="wide-table">
<caption>Staff schedule for Barry's Barnacle Broiler</caption><!-- <caption> Must be placed after initial table element -->
<tr>
<td></td>
<th scope="col">Monday</td>
<th scope="col">Tuesday</td>
<th scope="col">Wednesday</td>
<th scope="col">Thursday</td>
<th scope="col">Friday</td>
<th scope="col">Saturday</td>
<th scope="col">Sunday</td>
</tr>
<tr>
<th scope="row">0800–1200</th>
<td class="label-mark">Mark</td>
<td class="label-mark">Mark</td>
<td class="label-mark">Mark</td>
<td class="label-mark">Mark</td>
<td class="label-mark">Mark</td>
<td class="label-alex">Alex</td>
<td class="label-alex">Alex</td>
</tr>
<tr>
<th scope="row">1200–1600</th>
<td class="label-alex">Alex</td>
<td class="label-alex">Alex</td>
<td class="label-alex">Alex</td>
<td class="label-alex">Alex</td>
<td class="label-beth">Beth</td>
<td class="label-beth">Beth</td>
<td class="label-beth">Beth</td>
</tr>
<tr>
<th scope="row">1600–2000</th>
<td class="label-beth">Beth</td>
<td class="label-beth">Beth</td>
<td class="label-mark">Mark</td>
<td class="label-mark">Mark</td>
<td class="label-alex">Alex</td>
<td class="label-alex">Alex</td>
<td class="label-alex">Alex</td>
</tr>
</table>
</div>CSS
.code-block {
max-width: 60em;
margin: 2rem auto;
font-family: Helvetica, Arial, sans-serif;
padding: 1rem;
}
.code-block table {
background-color: #dedede;
padding: 1rem;
text-align: center;
margin: auto;
border: none;
border-collapse: collapse;
}
.code-block table caption {
caption-side: top;
margin: 1rem auto;
color: rgb(219, 219, 219);
background-color: rgb(18, 18, 116);
vertical-align: middle;
text-align: center;
padding: 1rem;
border-radius: .25rem;
}
.code-block table th[scope="col"] {
padding: 1rem;
}
.code-block table th, td, tr {
padding: 1rem;
}
.code-block table tr:nth-of-type(even) {
background-color: #eee;
}
.label-alex {
background-color: rgb(108, 108, 255);
}
.label-beth {
background-color: rgb(255, 111, 111);
}
.label-mark {
background-color: rgb(255, 255, 100);
}
@media (max-width: 819px) {
.narrow-table {
display: table;
visibility: visible;
}
.wide-table {
display: none;
visibility: hidden;
}
}
@media (min-width: 820px) {
.narrow-table {
display: none;
visibility: hidden;
}
.wide-table {
display: table;
visibility: visible;
}
}