固定テーブルtheadを使って水平テーブルを作成しようとしていますが、セマンティックHTMLでどうやって取得するのか本当に分かりません。固定テッドで水平テーブルを作る方法は？
このキャプチャを参照してください： 
赤い四角は、固定位置で、テーブルは非常に長くなる可能性があるため、私は、スクロールにのみ青色の部分をhorizontalyたいです。
しかし、問題は私が良いマークアップを持つことはできません。
この2回は無駄に試してみましたが、最初はよく見えますが、マークアップがあまり明確でないため固定位置を設定できません。theadは使用できません。そして2番目の外観は醜いですが、マークアップはtheadで、彼は固定され、tbodyスクロールに設定されています。
は、あなたが私にしてください、このテーブルを作成する方法のヒントを与えることはできますか？私はあなたを与えることができ
ソリューションは、あなたが今、スクロールすることができます表2に<div>
にあなたの<table>年代を分離することです。
CSS：
@charset 'UTF-8';
#tables {
width: 696px; // sum of table1 and table2
}
#table_1 {
width: 110px;
float: left;
display: inline-block;
}
#table_2 {
max-width: 586px;
margin: 18px 0 0 -2px;
overflow: scroll;
float: left;
display: inline-block;
}
table {
white-space: nowrap;
border-collapse: collapse;
border-spacing: 0;
}
caption {
text-align: left;
text-decoration: underline;
}
th {
text-align: left;
}
th, td {
border: 1px solid;
padding: 2px 0;
}
td {
padding: 2px;
}
HTML：
<div id="tables">
<table id="table_1">
<caption>Bus line</caption>
<tbody>
<tr>
<th colspan="2">Days</th>
</tr>
<tr>
<th colspan="2">School Periods</th>
</tr>
<tr>
<th colspan="2">School holidays</th>
</tr>
<tr>
<th colspan="2">Summer</th>
</tr>
<tr>
<th rowspan="3">City 1</th>
<td>Stop 1</td>
</tr>
<tr>
<td>Stop 2</td>
</tr>
<tr>
<td>Stop 3</td>
</tr>
<tr>
<th rowspan="3">City 2</th>
<td>Stop 1</td>
</tr>
<tr>
<td>Stop 2</td>
</tr>
<tr>
<td>Stop 3</td>
</tr>
</tbody>
</table>
<table id="table_2">
<tbody>
<tr>
<td colspan="36">Monday to Friday</td>
</tr>
<tr>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
</tr>
<tr>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>–</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>–</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
<td>•</td>
</tr>
<tr>
<td>–</td>
<td>•</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>–</td>
<td>•</td>
<td>–</td>
<td>–</td>
<td>•</td>
<td>•</td>
<td>–</td>
<td>•</td>
</tr>
<tr>
<td>6 h</td>
<td>6 h 25</td>
<td>6 h 45</td>
<td>7 h</td>
<td>7 h 15</td>
<td>7 h 30</td>
<td>7 h 45</td>
<td>8 h</td>
<td>8 h 15</td>
<td>8 h 30</td>
<td>8 h 45</td>
<td>9 h</td>
<td>9 h 15</td>
<td>9 h 45</td>
<td>10 h 15</td>
<td>11 h 15</td>
<td>12 h 15</td>
<td>12 h 35</td>
<td>12 h 55</td>
<td>13 h 15</td>
<td>14 h 15</td>
<td>15 h 15</td>
<td>16 h</td>
<td>16 h 15</td>
<td>16 h 30</td>
<td>16 h 45</td>
<td>17 h </td>
<td>17 h 12</td>
<td>17 h 25</td>
<td>17 h 40</td>
<td>17 h 55</td>
<td>18 h</td>
<td>18 h 15</td>
<td>18 h 30</td>
<td>18 h 45</td>
<td>19 h 15</td>
</tr>
<tr>
<td>6 h 05</td>
<td>6 h 30</td>
<td>6 h 50</td>
<td>7 h 05</td>
<td>7 h 20</td>
<td>7 h 35</td>
<td>7 h 50</td>
<td>8 h 05</td>
<td>8 h 20</td>
<td>8 h 35</td>
<td>8 h 50</td>
<td>9 h 05</td>
<td>9 h 20</td>
<td>9 h 50</td>
<td>10 h 20</td>
<td>11 h 20</td>
<td>12 h 20</td>
<td>12 h 40</td>
<td>13 h</td>
<td>13 h 20</td>
<td>14 h 20</td>
<td>15 h 20</td>
<td>16 h 05</td>
<td>16 h 20</td>
<td>16 h 35</td>
<td>16 h 50</td>
<td>17 h 05</td>
<td>17 h 17</td>
<td>17 h 30</td>
<td>17 h 45</td>
<td>18 h</td>
<td>18 h 05</td>
<td>18 h 20</td>
<td>18 h 35</td>
<td>18 h 50</td>
<td>19 h 20</td>
</tr>
<tr>
<td>6 h 08</td>
<td>6 h 33</td>
<td>6 h 53</td>
<td>7 h 08</td>
<td>7 h 23</td>
<td>7 h 38</td>
<td>7 h 53</td>
<td>8 h 08</td>
<td>8 h 23</td>
<td>8 h 38</td>
<td>8 h 53</td>
<td>9 h 08</td>
<td>9 h 23</td>
<td>9 h 53</td>
<td>10 h 23</td>
<td>11 h 23</td>
<td>12 h 23</td>
<td>12 h 43</td>
<td>13 h 03</td>
<td>13 h 23</td>
<td>14 h 23</td>
<td>15 h 23</td>
<td>16 h 08</td>
<td>16 h 23</td>
<td>16 h 38</td>
<td>16 h 53</td>
<td>17 h 08</td>
<td>17 h 20</td>
<td>17 h 33</td>
<td>17 h 48</td>
<td>18 h 03</td>
<td>18 h 08</td>
<td>18 h 23</td>
<td>18 h 38</td>
<td>18 h 53</td>
<td>19 h 23</td>
</tr>
<tr>
<td>6 h 10</td>
<td>6 h 35</td>
<td>6 h 55</td>
<td>7 h 10</td>
<td>7 h 25</td>
<td>7 h 40</td>
<td>7 h 55</td>
<td>8 h 10</td>
<td>8 h 25</td>
<td>8 h 40</td>
<td>8 h 55</td>
<td>9 h 10</td>
<td>9 h 25</td>
<td>9 h 55</td>
<td>10 h 25</td>
<td>11 h 25</td>
<td>12 h 25</td>
<td>12 h 45</td>
<td>13 h 05</td>
<td>13 h 25</td>
<td>14 h 25</td>
<td>15 h 25</td>
<td>16 h 10</td>
<td>16 h 25</td>
<td>16 h 40</td>
<td>16 h 55</td>
<td>17 h 10</td>
<td>17 h 22</td>
<td>17 h 35</td>
<td>17 h 50</td>
<td>18 h 05</td>
<td>18 h 10</td>
<td>18 h 25</td>
<td>18 h 40</td>
<td>18 h 55</td>
<td>19 h 25</td>
</tr>
<tr>
<td>6 h 11</td>
<td>6 h 36</td>
<td>6 h 56</td>
<td>7 h 11</td>
<td>7 h 26</td>
<td>7 h 41</td>
<td>7 h 56</td>
<td>8 h 11</td>
<td>8 h 26</td>
<td>8 h 41</td>
<td>8 h 56</td>
<td>9 h 11</td>
<td>9 h 26</td>
<td>9 h 56</td>
<td>10 h 26</td>
<td>11 h 26</td>
<td>12 h 26</td>
<td>12 h 46</td>
<td>13 h 06</td>
<td>13 h 26</td>
<td>14 h 26</td>
<td>15 h 26</td>
<td>16 h 11</td>
<td>16 h 26</td>
<td>16 h 41</td>
<td>16 h 56</td>
<td>17 h 11</td>
<td>17 h 23</td>
<td>17 h 36</td>
<td>17 h 51</td>
<td>18 h 06</td>
<td>18 h 11</td>
<td>18 h 26</td>
<td>18 h 41</td>
<td>18 h 56</td>
<td>19 h 26</td>
</tr>
<tr>
<td>6 h 12</td>
<td>6 h 37</td>
<td>6 h 57</td>
<td>7 h 12</td>
<td>7 h 27</td>
<td>7 h 42</td>
<td>7 h 57</td>
<td>8 h 12</td>
<td>8 h 27</td>
<td>8 h 42</td>
<td>8 h 57</td>
<td>9 h 12</td>
<td>9 h 27</td>
<td>9 h 57</td>
<td>10 h 27</td>
<td>11 h 27</td>
<td>12 h 27</td>
<td>12 h 47</td>
<td>13 h 07</td>
<td>13 h 27</td>
<td>14 h 27</td>
<td>15 h 27</td>
<td>16 h 12</td>
<td>16 h 27</td>
<td>16 h 42</td>
<td>16 h 57</td>
<td>17 h 12</td>
<td>17 h 24</td>
<td>17 h 37</td>
<td>17 h 52</td>
<td>18 h 07</td>
<td>18 h 12</td>
<td>18 h 27</td>
<td>18 h 42</td>
<td>18 h 57</td>
<td>19 h 27</td>
</tr>
</tbody>
</table>
ありがとう、これは私を助けた！私は2つのテーブルを使用していないが、
あなたの質問に関連するマークアップをコピーします。 jsfiddleは将来存在しないかもしれません。 – Rob