Wie mache ich eine horizontale Tabelle mit einem festen thead?

Question

Ich versuche, eine horizontale Tabelle mit einem festen thead zu machen, aber ich weiß wirklich nicht, wie man es mit einem semantischen HTML bekommt.

Sehen Sie diese Erfassung:

Das rote Quadrat die feste Position ist, und ich möchte, blättern horizontaly nur den blauen Teil, weil der Tisch sehr länger sein könnte.

Aber das Problem ist, ich kann kein gutes Markup haben.

Für diese Zeit habe ich dieses 2 mal unsuccefully versucht, das erste sieht gut aus, aber ich kann eine feste Position nicht festlegen, weil das Markup nicht sehr klar ist, kann ich thead hier nicht verwenden. Und das zweite sieht hässlich aus, aber das Markup ist besser, mit thead, um ihn fest zu setzen und tbody scroll.

Die erste: jsfiddle.net/g7bxej1h

die zweite: jsfiddle.net/wwb3fc2o

Können Sie mir eine Tipps, wie diese Tabelle bitte zu machen?

Answer 1

Die Lösung, die ich Ihnen geben kann, ist Ihre <table> ‚s in eine <div>

Auf Tabelle 2 Sie scrollen können nun zu trennen.

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>