A Pen by Sam Beckham.

A-Pen-by-Sam-Beckham.markdown

A Pen by Sam Beckham

A Pen by Sam Beckham on CodePen.

License.

index.html

<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>

style.scss

@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;
    }
  }
}