如何用固定的 thead 制作水平 table？

Question

我尝试用固定 thead 制作水平 table 但我真的不知道如何用语义 HTML.

查看此截图：

红色方块是固定位置，我只想水平滚动蓝色部分，因为table可能会更长

但问题是我不能有一个好的标记。

这一次我试了2次都不成功，第一次看起来不错但是我不能设置固定位置，因为标记不是很清楚，我不能在这里使用thead。第二个看起来很丑，但标记更好，用 thead 设置他固定和 tbody 滚动。

第一个：jsfiddle.net/g7bxej1h

第二个：jsfiddle.net/wwb3fc2o

你能告诉我如何制作这个 table 吗？

Answer 1

我可以给你的解决方案是将你的 <table> 分成 <div>

在 table 2 您现在可以滚动了。

SEE DEMO

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>

如何用固定的 thead 制作水平 table？

how to make a horizontal table with a fixed thead?

html

markup

layout

html-table