Replace the <dl> with a <table>

index.html

@@ -22,14 +22,19 @@
     <h2>{{ .Name }}</h2>
     <p>{{ .Town }}</p>
 
-    <dl>
+    <table>
-    {{ range $i, $val := .Departures }}
+      <tbody>
+      {{ range $i, $val := .Departures }}
       {{ if lt $i 3 }}
-      <dt>{{ $val.RouteShortName }} | {{ $val.StopHeadsign }}</dt>
+      <tr>
-      <dd><time>{{ formatTime $val.DepartureTime }}</time></dd>
+        <td>{{ $val.RouteShortName }}</td>
+        <td>{{ $val.StopHeadsign }}</td>
+        <td><time>{{ formatTime $val.DepartureTime }}</time></td>
+      </tr>
       {{ end }}
-    {{ end }}
+      {{ end }}
-    </dl>
+      </tbody>
+    </table>
   </article>
   {{ end }}
 </main>

static/css/busdepartures.css

@@ -22,20 +22,6 @@ p {
     margin-top: 0;
 }
 
-dt {
-    display: inline-block;
-    font-weight: bold;
-}
-
-dd {
-    display: inline;
-}
-
-dd::after {
-    content: "\A";
-    white-space: pre;
-}
-
 header {
     background: #000;
     color: #fff;
@@ -45,4 +31,16 @@ header {
 
 main {
     padding: 1rem 2rem;
+}
+
+td {
+    padding: .2rem .8rem;
+}
+
+td:first-child {
+    padding-left: 0;
+}
+
+td:last-child {
+    padding-right: 0;
 }