Question

我需要冻结下表的第一行，这是我下面的当前代码如果您需要更多信息，请告诉我

这是表格的图像：

<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);
 ?>

Answer 1

您可以使用<thead>来分割<th>代码。然后你可以使用固定定位的绝对值使该部分漂浮在其他部分之上。这是一个例子：

<强> 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;
}

您可能还需要在<tbody>标记的顶部添加一些填充，以便冻结的行不会位于任何数据之上。此外，绝对定位将相对于最近的定位祖先，因此您可能还需要在表格中添加位置。

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

Answer 2

尝试使用jquery Freeze Header

冻结HTML表格中的窗格

2 个答案: