Question

当表数据通过jquery向下滚动时，如何修复表的标题！表格的高度固定

<html>
 <body>
  <style type="text/css">
   <table class="fx">
    <tbody>
      <tr>
       <th>Email ID</th>
       <th>Time Taken to complete game (secs)</th>
       <th>Email ID</th><th>Time Taken to complete game (secs)</th>
      </tr>
    </tbody>
   </table>
 </div>
 <table class="data">
  <tbody>
   <tr>
    <td>asd@gmail.com</td>
    <td>449</td>
    <td>asd@gmail.com</td>
    <td>449</td>
   </tr>
   <tr>
   <tr>
    <td>sad@gmail.com</td>
    <td>449</td><td>asd@gmail.com</td>
    <td>449</td>
   </tr>
   <tr>
    <tr>
     <td>as@gmail.com</td>
     <td>449</td>
     <td>asd@gmail.com</td>
     <td>449</td>
    </tr>
     <tr> 
   </tr>
  </tbody>
 </table>

    table tbody
    {
       display: block;
    height: 262px;
    overflow: auto;
          }
      table {
    table-layout: fixed;
    height: 100px;
    overflow: auto;
    padding: 10px;
    }
    table tr{
        background-color: #F5F5F5;
    }
    table tr:nth-child(odd){

        background-color: #eee;
    }
    table tr:nth-child(even){

        background-color: #F5F5F5;
    }
    table tr td{
        padding:10px;
        width: 200px; 
         max-width: 200px;
        word-wrap:break-word;
        height: auto;
        text-align: center;
        color:#5d8d5d;
    }
    .fx{
         position: fixed;
      top: 0;

      left: 0;
      }

      .fx tr th {
        padding:10px;
        background-color: #ddd;
        width: 200px;
        color:#6d4d9d;
        text-align: center;

    }

    .data{
      margin-top: 70px;
    }

    div{
      position: relative;

    }
    *{
      margin: 0;
      padding: 0;
    }

    </style>
    <div>



    </body>
    </html>

当表数据通过jquery向下滚动时，如何修复表的标题！桌子的高度急需

Answer 1

请参阅此LINK

或

请你试试这个......

CSS样式：

<style> table tbody { display: block; height: 262px; overflow: auto; } table { table-layout: fixed; height: 100px; overflow: auto; padding: 0px; } table tr { background-color: #F5F5F5; } table tr:nth-child(odd) { background-color: #eee; } table tr:nth-child(even) { background-color: #F5F5F5; } table tr td { padding: 0px; width: 200px; max-width: 200px; word-wrap: break-word; height: auto; text-align: center; color: #5d8d5d; } .fx { position: fixed; top: 0; left: 0; min-width:850px; width:850px; } .fx tr th { padding: 10px; background-color: #ddd; width: 175px; min-width: 175px; color: #6d4d9d; text-align: center; } .data { margin-top: 0px; min-width:850px; width:850px; left: 0; } .data tr th { padding: 10px; width: 175px; min-width: 175px; text-align: center; } div { position: relative; } * { margin: 0; padding: 0; } </style>

HTML：

<table class="fx"> <tbody> <tr> <th> Email ID </th> <th> Time Taken to complete game (secs) </th> <th> Email ID </th> <th> Time Taken to complete game (secs) </th> </tr> </tbody> </table> <div id="data" style="valign: top; overflow: auto; min-width:850px; height: 100px; margin-top: 60px; padding-top: 0px"> <table class="data"> <tbody> <tr> <th> asd@gmail.com </th> <th> 449 </th> <th> asd@gmail.com </th> <th> 449 </th> </tr> <tr> <tr> <th> sad@gmail.com </th> <th> 449 </th> <th> asd@gmail.com </th> <th> 449 </th> </tr> <tr> <tr> <th> as@gmail.com </th> <th> 449 </th> <th> asd@gmail.com </th> <th> 449 </th> </tr> <tr> </tr> </tbody> </table> </div>

如何修复表格的标题？

1 个答案: