2016-03-26 34 views
0

我尝试制作一个固定的thead水平表,但我真的不知道如何用语义HTML获取它。如何用固定的thead制作水平桌面?

看到这个捕获: enter image description here

红色广场是固定的位置,我想horizo​​ntaly滚动只有蓝色的部分,因为该表可能会非常长。

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

对于这个时候,我已经试过这2次不合格,第一次看起来不错,但我不能设置一个固定的位置,因为标记不是很清楚,我不能在这里使用thead。而第二个看起来很丑,但标记更好,用thead,将其设置为固定并滚动tbody

第一:jsfiddle.net/g7bxej1h

第二:jsfiddle.net/wwb3fc2o

你能不能给我一个提示,如何让这个表吗?

+1

复制相关的标记到你的问题。 jsfiddle将来可能不存在。 – Rob

回答

0

,我可以给你解决的办法是你的<table>的分成<div>

表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> 

+0

谢谢,这帮助了我!我没有使用两个表,但

,和 – yoanm

+0

没问题...你欢迎! – aldanux