dongque1462 2013-09-05 14:26
浏览 552

冻结HTML表格中的窗格

I need to freeze the first row for the below table, here's my current code below Please let me know if you need anymore information

Here's an image of the table: 

<head>
<style> 
   table,td,th
   {border-collapse:collapse;}
   table.myTable td, table.myTable th { border:1px solid black;padding:5px;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   color:#2C3539;
   font-size:0.80em}

   table
   {width:100%;}
   th{background-color:#B6B6B4;
   height:10px;}
</style>

<table class="myTable">
<?php
//MySQL Database Connect
include 'connect.php';
 echo "
 <tr>
 <th>Name</th>
 <th>Location</th>
 <th>Email</th>
 <th>Mobile</th>
 <th>IMEI</th>
 <th>Phone</th>
 <th>Message</th>
 </tr></Freezing>";

 while($row = mysqli_fetch_array($result))

   {
   echo "<tr>";
   echo "<td>" . $row['Name'] . "</td>";
   echo "<td>" . $row['Location'] . "</td>";
   echo "<td>" . $row['Email'] . "</td>";
   echo "<td>" . $row['Mobile'] . "</td>";
   echo "<td>" . $row['IMEI'] . "</td>";
   echo "<td>" . $row['Phone'] . "</td>";
   echo "<td>" . $row['Message'] . "</td>";
   echo "</tr>";
   }
 echo "</table>";

mysqli_close($con);
 ?>
  • 写回答

2条回答 默认 最新

  • doulubashang6936 2013-09-05 14:41
    关注

    What you could do instead is use the <thead> to segment your <th> tags. Then you could use either absolute of fixed positioning to have that section float above the others. Here is an example:

    HTML

    <thead>
    <tr>
        <th>Name</th>
        <th>Location</th>
        <th>Email</th>
        <th>Mobile</th>
        <th>IMEI</th>
        <th>Phone</th>
        <th>Message</th>
    </tr>
</thead>
<tbody>
...
</tbody>

    CSS

    thead { 
    display: block;
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%
    z-index: 100;
}

    You may also need to add some padding to the top of the <tbody> tag so that the frozen row does not sit over top of any data. Additionally, absolute positioning will be relative to the nearest positioned ancestor, so you may need to add a position to the table as well.

    table {
    position: relative;
}
tbody {
    padding-top: 1em;
}
    评论

报告相同问题？

悬赏问题

  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题