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 全部备份安卓app数据包括密码，可以复制到另一手机上运行
  • ¥15 Python3.5 相关代码写作
  • ¥20 测距传感器数据手册i2c
  • ¥15 RPA正常跑，cmd输入cookies跑不出来
  • ¥15 求帮我调试一下freefem代码
  • ¥15 matlab代码解决，怎么运行
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗