【发布时间】：2014-04-08 11:10:53
【问题描述】：
首先，我知道有人问过类似的问题，因为我已经搜索了好几天，但我一直找不到有效的解决方案。
此外，由于某种原因，我尝试使用的任何 JQuery/Javascript 根本不会影响表格。
基本上我有一个表（有很多列），我想要容器内的标题，但已修复，因此如果您在容器内向下滚动，标题会保留。
我尝试在 jQuery 中添加，将列名放在与行不同的表中，并做一个简单的位置：固定并更改顶部和左侧的 CSS 等，不幸的是仍然没有运气。
目前，因为我试图保持这个简单，所以我试图坚持使用 CSS 解决方案，而我的 position:fixed 导致了这个错误：
我也尝试过使用 z-index，但我不确定这与我想要实现的目标是否相关
但它应该是什么样子（我已经剪掉了侧面的列，但有 20 多个）是这样的：除了它不会在边界内保持固定
我的代码：
CSS：
table
{
border: 0;
padding: 0;
margin: 0 0 20px 0;
border-collapse: collapse;
}
th
{
padding: 5px;
text-align: right;
font-weight:bold;
line-height: 2em;
color: #FFF;
background-color: #555;
}
tbody td
{
padding: 10px;
line-height: 18px;
border-top: 1px solid #E0E0E0;
}
tbody tr:nth-child(2n)
{
background-color: #F7F7F7;
}
tbody tr:hover
{
background-color: #EEEEEE;
}
td
{
text-align: right;
}
td:first-child, th:first-child
{
text-align: left;
}
.table-container
{
height: 500px;
width: 100%;
overflow: auto;
position:relative;
}
还有我的 PHP 文件：
<div class="table-container">
<table>
<thead>
<tr>
<th>Account Name</th>
<th>Opportunity ID</th>
<th>Opportunity Name</th>
<th>Project Manager</th>
<th>Close Date</th>
<th>Deal Region</th>
<th>Status</th>
<th>Post Close Changes</th>
<th>Product Name</th>
<th>Model</th>
<th>Racks</th>
<th>Chassis</th>
<th>Additional Info</th>
<th>QA Review</th>
<th>QA Required</th>
<th>QA Pack Out Complete</th>
<th>Material Complete</th>
<th>Required Build Start</th>
<th>Actual Start</th>
<th>Finish Date</th>
<th>Manufacturing Status</th>
<th>Notes</th>
<th>Start Date</th>
<th>LFinish Date</th>
<th>Power Down</th>
<th>Ship Date</th>
<th>Delivery Date</th>
<th>Requested Delivery</th>
<th>Altered Requested </th>
<th>Crating Inspection</th>
<th>Country Name</th>
</tr>
</thead>
<?php foreach ($return as $index => $row) : ?>
<tbody>
<tr>
<td><?php echo $row['Account_Name']?></td>
<td><?php echo $row['Opportunity_ID']?></td>
<td><?php echo $row['Opportunity_Name']?></td>
<td><?php echo $row['Project_Manager']?></td>
<td><?php echo $row['Close_Date']?></td>
<td><?php echo $row['Deal_Region']?></td>
<td><?php echo $row['Status']?></td>
<td><?php echo $row['Post_Close_Changes']?></td>
<td><?php echo $row['Product_Name']?></td>
<td><?php echo $row['Model']?></td>
<td><?php echo $row['Racks']?></td>
<td><?php echo $row['Chassis_Count']?></td>
<td><?php echo $row['additional_info']?></td>
<td><?php echo $row['QA_Review']?></td>
<td><?php echo $row['QA_Required']?></td>
<td><?php echo $row['QA_Pack_Out_Complete']?></td>
<td><?php echo $row['Material_Complete']?></td>
<td><?php echo $row['Req_Build_Start']?></td>
<td><?php echo $row['Actual_Start']?></td>
<td><?php echo $row['Finish_Date']?></td>
<td><?php echo $row['Manufacturing_Status']?></td>
<td><?php echo $row['Notes']?></td>
<td><?php echo $row['Start_Date']?></td>
<td><?php echo $row['LFinish_Date']?></td>
<td><?php echo $row['Power_Down']?></td>
<td><?php echo $row['Ship_Date']?></td>
<td><?php echo $row['Delivery_Date']?></td>
<td><?php echo $row['Requested_Delivery']?></td>
<td><?php echo $row['Altered_Requested']?></td>
<td><?php echo $row['Crating_Inspection']?></td>
<td><?php echo $row['Country_Name']?></td>
<td><a href="<?php printf('updateall.php', $row['Opportunity_ID']);?>">Edit</a></td>
<td>
<form action="index.php" method="GET">
<input type="hidden" name="delete" value="yes" />
<input type="hidden" name="id" value="<?php echo $row['Opportunity_ID'];?>" />
<input type="submit" value="Delete" />
</form></td>
</tr>
</tbody>
<?php endforeach; ?>
</table>
</div>
这几天我一直在浏览各种网站和示例，非常感谢任何帮助！
【问题讨论】：
标签： css css-position containers fixed