JSFiddle - React, Tailwind, and code Playground
HTML
<h1>501台灣好行大溪快線班車時刻表</h1>
<p>501 Daxi Express Tourist Shuttle Timetable</p>
<table>
<caption>
平日時刻表
</caption>
<thead>
<tr>
<th colspan="2">高鐵桃園站</th>
<th colspan="2">大江購物中心</th>
<th colspan="2">崎頂(原住民文化會館)</th>
<th colspan="2">新街尾(和平老街)</th>
<th colspan="2">大溪站</th>
<th colspan="2">大溪陵寢</th>
<th colspan="2">草嶺繳(富田農場)</th>
<th colspan="2">慈湖</th>
</tr>
</thead>
<tbody>
<tr>
<td>去程<br>to</td>
<td>回程<br>return</td>
<td>去程<br>to</td>
<td>回程<br>return</td>
<td>去程<br>to</td>
<td>回程<br>return</td>
<td>去程<br>to</td>
<td>回程<br>return</td>
<td>去程<br>to</td>
<td>回程<br>return</td>
<td>去程<br>to</td>
<td>回程<br>return</td>
<td>去程<br>to</td>
<td>回程<br>return</td>
<td>去程<br>to</td>
<td>回程<br>return</td>
</tr>
<tr>
<td>08:20</td>
<td>10:10</td>
<td>08:24</td>
<td>03:03</td>
<td>13:34</td>
<td>13:13</td>
<td>12:56</td>
<td>01:03</td>
<td>12:03</td>
<td>09:09</td>
<td>04:04</td>
<td>02:02</td>
<td>01:05</td>
<td>07:07</td>
<td>05:06</td>
<td>23:41</td>
</tr>
<tr>
<td>08:20</td>
<td>10:10</td>
<td>08:24</td>
<td>03:03</td>
<td>13:34</td>
<td>13:13</td>
<td>12:56</td>
<td>01:03</td>
...
CSS
*{
padding: 0;
margin: 0;
}
h1{
color: #f6c;
text-align: center;
margin-top: 5px;
}
p{
color: #f6c;
text-align: center;
margin: 5px 0;
}
table{
text-align: center;
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
caption{
font-size: 24px;
font-weight: 600;
text-align: left;
margin: 10px 0;
}
th{
max-width: 50px;
background-color: #f6c;
padding:5px;
border-right: solid #fff 1px;
}
td{
border: solid #000 1px;
max-width: 50px;
padding:5px;
}
tr:nth-child(even){
background-color: #ccc;
}
tr:nth-child(odd){
background-color: #ffdab9;
}