Question

首先，我知道有类似的问题被问到，因为我已经搜索了好几天，但我找不到有效的解决方案。

此外，我尝试使用的任何JQuery / Javascript都不会因某种原因而影响表格。

基本上我有一个表（有很多列），我想要容器中的标题但是固定，这样如果你在容器内向下滚动标题就会停留。

我尝试添加jQuery，将列名放在与行不同的表中，并执行一个简单的位置：修复和更改顶部和左侧的CSS等，遗憾的是仍然没有运气。

目前，因为我试图保持这个简单，我试图坚持使用CSS解决方案和我的位置：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>

我已经在这几天看了各种各样的网站和例子，任何帮助都会非常感激！

Answer 1

你可以尝试的是为你的表所在的行/列设置一个类，然后尝试position：fixed。
我不知道这对PHP来说是否与HTML一样。

Answer 2

执行此操作的唯一方法是使用两个单独的表。

<table id="tableHeader">
<colgroup>
    <col class="column1"></col>
    <col class="column2"></col>
    <col class="column3"></col>
    <col class="column4"></col>
    <col class="column5"></col>
</colgroup>
<thead>
    <tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
        <th>Header4</th>
        <th>Header5</th>
    </tr>
    <thead>
    </table>
    <div id="tableBody-container">      
<table id="tableBody">
     <colgroup>
        <col class="column1"></col>
        <col class="column2"></col>
        <col class="column3"></col>
        <col class="column4"></col>
        <col class="column5"></col>
    </colgroup>
    <tbody>
        <tr>
            <td>Val1</td>
            <td>Val2</td>
            <td>Val3</td>
            <td>Val4</td>
            <td>Val5</td>
        </tr>
        <tr>
            <td>Val21</td>
            <td>Val22</td>
            <td>Val23</td>
            <td>Val24</td>
            <td>Val25</td>
        </tr>
        <tr>
            <td>Val31</td>
            <td>Val32</td>
            <td>Val33</td>
            <td>Val34</td>
            <td>Val35</td>
        </tr>
        <tr>
            <td>Val41</td>
            <td>Val42</td>
            <td>Val43</td>
            <td>Val44</td>
            <td>Val45</td>
        </tr>
    <tbody>
</table>
</div>

然后您将允许第二个表容器滚动。但是您需要将相同的列宽应用于两个表

#tableHeader {
    width: 100%;
}

#tableHeader th {
    text-align: left;
}

#tableBody-container {
    height: 50px;
    overflow: auto;
}

#tableBody {
    width: 100%;
}

.column1,
.column2,
.column3,
.column4,
.column5 {
    width: 20%
}

但是还会有一个问题 - 正文的滚动会使正文表格宽度小于标题表格。所以一点点javascript

var scrollWidth = $("#tableHeader").width() - $("#tableBody").width();
$("#tableHeader").css("padding-right", scrollWidth);

另请参阅：http://jsfiddle.net/ZNP3q/

Answer 3

事实证明我的Jquery无法工作的原因是因为我使用的是未连接到互联网的虚拟机而src =“http // ..”因此失败了。下载了javascript并将其添加到文件夹中，我的问题现已修复！

（解决方案确实是JQuery）

修复容器中表的标题位置

3 个答案: