冻结 HTML 表格中的窗格
Posted
技术标签:
【中文标题】冻结 HTML 表格中的窗格【英文标题】：Freeze panes in a HTML table 【发布时间】：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%;
thbackground-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 还有谷歌“固定标题表”。你应该可以找到很多选择。 【参考方案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
【讨论】：
以上是关于冻结 HTML 表格中的窗格的主要内容，如果未能解决你的问题，请参考以下文章