冻结 HTML 表格中的窗格答案

【问题标题】：Freeze panes in a HTML table冻结 HTML 表格中的窗格
【发布时间】：2013-09-09 10:42:18
【问题描述】：

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

这是一张桌子的图片：

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

【问题讨论】：

“我需要冻结下表的第一行” – 你需要详细说明。
i.stack.imgur.com/NzJKZ.png - 此图像将显示表格，灰色背景将是我需要冻结的行，如果这有意义的话
我看到了图片，我只是不明白你想要达到什么目的。
你的意思是让它“固定”，这样它就不会移动了？
看看这个fixedheadertable.com 和datatables.net/extras/fixedheader 还有谷歌“固定标题表”。你应该可以找到很多选择。

标签： php css html-table

【解决方案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;
}

【讨论】：

我可以看到它的去向，但没有解决问题。 i.imgur.com/bXdm0O2.png 它还在移动
也许试试display: table-row而不是显示块？
@Billo 然后您需要将所有单元格设置为固定宽度大小。
已将其移动到正确的位置，但在滚动时仍会移动。此外，宽度设置为 100%，因此根据屏幕大小，宽度会发生变化
尝试使用position: fixed，而不是absolute。

【解决方案2】：

试试这个，虽然Freeze Header使用jquery

【讨论】：