冻结桌子的顶面行为网站

时间：2015-05-14 13:26:19

标签： html css html-table

我使用Tableizer将我的Excel工作表转换为HTML代码，然后粘贴到我的网站。我试图让我的桌子可滚动。我无法确定在何处或如何插入此处列出的选项：Freezing/Fixing the Top Header Row of a table

任何人都可以帮忙吗？

以下是Tableizer.com的代码

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

没有真正漂亮的方法可以做到这一点。

你需要把你想成为你的桌子的头部带到一张新的桌子上，然后把它放在下面。

总而言之，结果就是这样。

您需要匹配列宽。

如果你的桌子是一整页，请告诉我，我可以告诉你如何为更大的桌子做这件事。

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>

相关问题
最新问题