Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Sam Beckham.
<table class="ferry-timetable">
<thead>
<tr>
<th colspan='9'>South Sheilds to North Sheilds</th>
</tr>
</thead>
<tbody>
<tr>
<td class="day">Monday - Wednesday</td>
<td>06:45</td>
<td>07:15</td>
<td rowspan="3">Then at these <br />times past <br />each hour</td>
<td>15</td>
<td>45</td>
<td rowspan="3">until</td>
<td>19:15</td>
<td>19:45</td>
</tr>
<tr>
<td class="day">Thursday - Saturday</td>
<td>06:45</td>
<td>07:15</td>
<td>15</td>
<td>45</td>
<td>22:15</td>
<td>22:45</td>
</tr>
<tr>
<td class="day">Sunday</td>
<td>-</td>
<td>10:15</td>
<td>15</td>
<td>45</td>
<td>17:15</td>
<td>17:45</td>
</tr>
</tbody>
</table>
@import "compass";
.ferry-timetable{
th{
background-color: #00b4eb;
}
td{
text-align: center;
vertical-align: middle;
@media (max-width: 720px){
padding-left: 0;
&:before{
display: none;
}
}
}
.day{
text-align: left;
background-color: #eee;
}
@media(max-width: 720px){
thead tr{
position: static;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.