Question

以下是页面：http://lim.bz/dlaczegojezus/tabela2.php 我想要的是当我向下滚动页面时（或者也是横向），标题始终保持在顶部。

这就是我现在所拥有的：http://lim.bz/dlaczegojezus/tabela.php但是它在IE中不起作用（第10节）并且滚动不起作用。

    <table id="tfhover" class="tftable" border="1">
<thead style="width:1923px;">
  <tr>
    <th colspan="3" width="115px">Data</th>
    <th rowspan="2" width="38px">L.p.</th>
    <th colspan="3" class="zielony" width="316px">Użytkownik</th>
    <th rowspan="2" width="93px">Strona</th>
    <th colspan="3" width="247px">Czas</th>
    <th colspan="2" width="162px">Położenie</th>
    <th colspan="4" class="zielony" width="139px">Wejście</th>
    <th rowspan="2" width="71px">System</th>
    <th rowspan="2" width="88px">Przeglądarka</th>
    <th colspan="5" class="rozowy" width="375px">Dane demograficzne</th>
    <th colspan="2" class="zolty" width="245px">Kontakt</th>
  </tr>
  <tr>
    <th width="38px">r.</th>
    <th width="22px">m.</th>
    <th width="22px">d.</th>
    <th class="zielony" width="174px">login</th>
    <th class="zielony" width="59px">nieznany</th>
    <th class="zielony" width="50px">znany</th>
    <th width="64px">wejście</th>
    <th width="64px">wyjście</th>
    <th width="86px">suma</th>
    <th width="70px">długość</th>
    <th width="70px">szerokość</th>
    <th class="zielony" width="31px">WEB</th>
    <th class="zielony" width="17px">FB</th>
    <th class="zielony" width="20px">QR</th>
    <th class="zielony" width="27px">NFC</th>
    <th class="rozowy" width="92px">wyznanie</th>
    <th class="rozowy" width="32px">wiek</th>
    <th class="rozowy" width="27px">płeć</th>
    <th class="rozowy" width="94px">wykształcenie</th>
    <th class="rozowy" width="75px">zaludnienie</th>
    <th class="zolty" width="39px">typ</th>
    <th class="zolty">adres/numer</th>
  </tr>
 </thead>
 <tbody style="width:1923px;">
  <tr>
      <?php      foreach ($sesTab as $k => $ses) {

         $time_on_page = ($ses['visit_out'] - $ses['visit_in']) < 0 ? ' - ' : ($ses['visit_out']-$ses['visit_in'] .' sec.' );


         echo "
    <td width=\"38px\">".date('Y',strtotime($ses['timestamp']))."</td>
    <td width=\"22px\">".date('m',strtotime($ses['timestamp']))."</td>
    <td width=\"22px\">".date('d',strtotime($ses['timestamp']))."</td>
    <td>$k</td>
    <td>".$ses['email']."</td>
    <td>".$ses['login']."</td>
    <td>".$ses['first_name']."</td>
    <td>".$ses['filename']."</td>
    <td>".date('H:i:s',$ses['visit_in']+3600*7)."</td>
    <td>".date('H:i:s',$ses['visit_out']+3600*7)."</td>
    <td>".$time_on_page ." </td>
    <td>";
          if(empty($ses['loc_lng'])) {
          echo ' - ';}
            else {
               $wspol = DECtoDMS($ses['loc_lng']);
            echo $wspol['deg']."°".$wspol['min']."'".  substr($wspol['sec'],"0","2")."\"";}
    echo "</td>
    <td>";
          if(empty($ses['loc_lat'])){
          echo ' - ';}
               else{
                 $wspol = DECtoDMS($ses['loc_lat']);
               echo $wspol['deg']."°".$wspol['min']."'". substr($wspol['sec'],"0","2")."\"";}
    echo "</td>
    <td>x</td>
    <td>-</td>
    <td>x</td>
    <td>-</td>
    <td>".$extra_tab[$ses['session_id']]['os']."</td>
    <td>".$extra_tab[$ses['session_id']]['browser']."</td>
    <td>".$extra_tab[$ses['session_id']]['religion']."</td>
    <td>".$extra_tab[$ses['session_id']]['age']."</td>
    <td>".$extra_tab[$ses['session_id']]['sex']."</td>
    <td>".$extra_tab[$ses['session_id']]['education']."</td>
    <td>".$extra_tab[$ses['session_id']]['population']."</td>
    <td>email</td>
    <td>".$ses['email']."</td>
          </tr>";}

           ?>

  </tbody>
</table>

Answer 1

尝试在你的thead上使用position:fixed;。

Answer 2

你可以改变

<thead style="width:1923px;">

到

<thead style="width:1923px; position: fixed; top: 0; left: 0;">

您还需要将此css代码添加到正文

<body style="padding-top: 47px;">

其中47px是固定行的高度，您可以更改它。希望这会对你有所帮助

用水平滚动修复了thead

2 个答案: