凍結網站的頂部表格行

我使用Tableizer將我的Excel工作表轉換爲HTML代碼，然後粘貼到我的網站。我試圖讓我的桌面可以滾動。我不知道在哪裏或如何插入這裏列出的選項：Freezing/Fixing the Top Header Row of a table 凍結網站的頂部表格行

任何人都可以幫忙？

這裏是Tableizer.com

table.tableizer-table { 
 
    border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 12px; 
 
    text-align:center; 
 
} 
 
.tableizer-table td { 
 
    padding: 4px; 
 
    margin: 3px; 
 
    border: 1px solid #ccc; 
 
    text-align:center; 
 
} 
 
.tableizer-table th { 
 
    background-color: #C61F13; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
    text-align:center; 
 
}

<table class="tableizer-table"> 
 
    <tr class="tableizer-firstrow"><th width="5%">District</th><th width="5%">Dlr Code</th><th width="20%">Dealer Name</th><th width="5%">Kia CPO Volume Obj</th><th width="5%">Current Standings</th><th width="5%">Enrolled</th><th width="5%">To Go</th></tr> 
 
    <tr><td>CE01</td><td>IL001</td><td>ARLINGTON KIA IN PALATINE</td><td>30 </td><td>8</td><td>yes</td><td>22</td></tr> 
 
    <tr><td>CE01</td><td>IL003</td><td>LIBERTY KIA</td><td>30 </td><td>2</td><td>yes</td><td>28</td></tr> 
 
    <tr><td>CE01</td><td>IL035</td><td>NAPLETON'S KIA OF ELMHURST</td><td>32 </td><td>11</td><td>yes</td><td>21</td></tr> 
 
    <tr><td>CE01</td><td>IL036</td><td>ROCK RIVER KIA</td><td>30 </td><td>0</td><td>no</td><td>30</td></tr> 
 
    <tr><td>CE01</td><td>IL051</td><td>RAYMOND KIA</td><td>30 </td><td>3</td><td>yes</td><td>27</td></tr> 
 
    <tr><td>CE01</td><td>IL054</td><td>GERALD KIA OF NAPERVILLE</td><td>30 </td><td>16</td><td>yes</td><td>14</td></tr> 
 
    <tr><td>CE01</td><td>IL057</td><td>GARY LANG KIA</td><td>30 </td><td>11</td><td>yes</td><td>19</td></tr> 
 
    <tr><td>CE01</td><td>IL058</td><td>CLASSIC KIA</td><td>30 </td><td>2</td><td>yes</td><td>28</td></tr> 
 
    <tr><td>CE01</td><td>IL060</td><td>GROSSINGER KIA</td><td>30 </td><td>0</td><td>yes</td><td>30</td></tr> 
 
    <tr><td>CE01</td><td>IL064</td><td>BOB ROHRMAN SCHAUMBURG KIA</td><td>30 </td><td>0</td><td>no</td><td>30</td></tr> 
 
    <tr><td>CE01</td><td>IL071</td><td>GERALD KIA OF NORTH AURORA</td><td>30 </td><td>13</td><td>yes</td><td>17</td></tr> 
 
    <tr><td>CE01</td><td>IL072</td><td>NAPLETON'S ELGIN KIA</td><td>30 </td><td>20</td><td>yes</td><td>10</td></tr> 
 
    <tr><td>CE02</td><td>OH003</td><td>HALLEEN KIA</td><td>90 </td><td>54</td><td>yes</td><td>36</td></tr> 
 
    <tr><td>CE02</td><td>OH016</td><td>WAIKEM KIA</td><td>30 </td><td>15</td><td>no</td><td>15</td></tr> 
 
    <tr><td>CE02</td><td>OH025</td><td>TAYLOR KIA</td><td>37 </td><td>1</td><td>yes</td><td>36</td></tr> 
 
</table>

來源

2015-05-14 Juliana Ackerman

我的代碼有沒有真正漂亮的方式做到這一點。

你將需要把你想要成爲你的桌子的頭，並進入一個新的桌子和風格它像波紋管。

總而言之，這最終都是這樣的。

儘管你需要匹配你的列寬。

如果你的桌子是一個完整的頁面讓我知道，我可以告訴你一個方法來做一個更大的表。

here is a fiddle

table.tableizer-table { 
 
    border: 1px solid #CCC; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 300px; 
 
    overflow: scroll; 
 
} 
 
.tableizer-table td { 
 
    padding: 4px; 
 
    margin: 3px; 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
} 
 
.tableizer-table th { 
 
    background-color: #C61F13; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 
.headtbl { 
 
    background-color: red; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.tablearea { 
 
    height: 300px; 
 
    overflow-y: scroll; 
 
}

<div class="container"> 
 
    <table class="headtbl"> 
 

 
    <tr class="tableizer-firstrow"> 
 
     <th width="5%">District</th> 
 
     <th width="5%">Dlr Code</th> 
 
     <th width="20%">Dealer Name</th> 
 
     <th width="5%">Kia CPO Volume Obj</th> 
 
     <th width="5%">Current Standings</th> 
 
     <th width="5%">Enrolled</th> 
 
     <th width="5%">To Go</th> 
 
    </tr> 
 
    </table> 
 
    <div class="tablearea"> 
 
    <table class="tableizer-table"> 
 
     <tr> 
 
     <td>CE01</td> 
 
     <td>IL001</td> 
 
     <td>ARLINGTON KIA IN PALATINE</td> 
 
     <td>30</td> 
 
     <td>8</td> 
 
     <td>yes</td> 
 
     <td>22</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE01</td> 
 
     <td>IL003</td> 
 
     <td>LIBERTY KIA</td> 
 
     <td>30</td> 
 
     <td>2</td> 
 
     <td>yes</td> 
 
     <td>28</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE01</td> 
 
     <td>IL035</td> 
 
     <td>NAPLETON'S KIA OF ELMHURST</td> 
 
     <td>32</td> 
 
     <td>11</td> 
 
     <td>yes</td> 
 
     <td>21</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE01</td> 
 
     <td>IL036</td> 
 
     <td>ROCK RIVER KIA</td> 
 
     <td>30</td> 
 
     <td>0</td> 
 
     <td>no</td> 
 
     <td>30</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE01</td> 
 
     <td>IL051</td> 
 
     <td>RAYMOND KIA</td> 
 
     <td>30</td> 
 
     <td>3</td> 
 
     <td>yes</td> 
 
     <td>27</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE01</td> 
 
     <td>IL054</td> 
 
     <td>GERALD KIA OF NAPERVILLE</td> 
 
     <td>30</td> 
 
     <td>16</td> 
 
     <td>yes</td> 
 
     <td>14</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE01</td> 
 
     <td>IL057</td> 
 
     <td>GARY LANG KIA</td> 
 
     <td>30</td> 
 
     <td>11</td> 
 
     <td>yes</td> 
 
     <td>19</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE01</td> 
 
     <td>IL058</td> 
 
     <td>CLASSIC KIA</td> 
 
     <td>30</td> 
 
     <td>2</td> 
 
     <td>yes</td> 
 
     <td>28</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE01</td> 
 
     <td>IL060</td> 
 
     <td>GROSSINGER KIA</td> 
 
     <td>30</td> 
 
     <td>0</td> 
 
     <td>yes</td> 
 
     <td>30</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE01</td> 
 
     <td>IL064</td> 
 
     <td>BOB ROHRMAN SCHAUMBURG KIA</td> 
 
     <td>30</td> 
 
     <td>0</td> 
 
     <td>no</td> 
 
     <td>30</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE01</td> 
 
     <td>IL071</td> 
 
     <td>GERALD KIA OF NORTH AURORA</td> 
 
     <td>30</td> 
 
     <td>13</td> 
 
     <td>yes</td> 
 
     <td>17</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE01</td> 
 
     <td>IL072</td> 
 
     <td>NAPLETON'S ELGIN KIA</td> 
 
     <td>30</td> 
 
     <td>20</td> 
 
     <td>yes</td> 
 
     <td>10</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE02</td> 
 
     <td>OH003</td> 
 
     <td>HALLEEN KIA</td> 
 
     <td>90</td> 
 
     <td>54</td> 
 
     <td>yes</td> 
 
     <td>36</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE02</td> 
 
     <td>OH016</td> 
 
     <td>WAIKEM KIA</td> 
 
     <td>30</td> 
 
     <td>15</td> 
 
     <td>no</td> 
 
     <td>15</td> 
 
     </tr> 
 
     <tr> 
 
     <td>CE02</td> 
 
     <td>OH025</td> 
 
     <td>TAYLOR KIA</td> 
 
     <td>37</td> 
 
     <td>1</td> 
 
     <td>yes</td> 
 
     <td>36</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

來源

2015-05-14 13:57:57 DCdaz

非常感謝您的幫助 –

不用擔心朱莉安娜只記得將其標記爲固定這樣的人沒有，他們有一個答案使用 – DCdaz

凍結網站的頂部表格行

回答

相關問題