Question

这是带有滚动按钮的简单列表显示的代码示例。它运行良好。但是现在我要冻结第一排......这就是标题..你能帮帮我..

<div id="user">
        <table class="user_list" frame="box" bordercolor="#c1a3cf"
                       border="1" cellspacing="3" cellpadding="3">
           <thead>
             <tr>
                <th  style="padding-top:15px;"> Nr. </th>
                <th  style="padding-top:15px;"> Concession Nr. </th>
                <th  style="padding-top:15px;"> Action Performed </th>
                <th  style="padding-top:15px;"> Action by </th>
                <th  style="padding-top:15px;"> Action on </th>
             </tr>
             </thead>
           <tbody>
              <?php  $result = get_user_actionlog($seite,$entries);

              if($seite == 1) {
                 $number = 0;
              } else {
                 $number = ($seite-1) * $entries;
              }

            while($record = odbc_fetch_array($result)) { ?>
              <tr>
                <td width="25" class="rtodata"><?php $number += 1;
                      echo $number;?></td>
             <td width="150" class="rtodata"><?php echo $record['concession']; ?>  </td>
             <td width="400" class="rtodata"><?php  echo $record['action_performed'];?></td>
             <td width="75" class="rtodata"><?php echo $record['action_by'];?></td>
             <td width="100" class="rtodata"><?php echo $record['action_on'];?></td>
           </tr>
            <?php }?>
         </tbody>
    </table>
 </div>

在我的CSS文件中

#user {width: 900px;height:800px;overflow:auto;}

修改： -

scrollable table with fixed header在Firefox 6.0中完美地运行，但在IE 7.0中则不行。如果你们中的任何一个冠军可以更新......

Answer 1

您可以通过向<thead>添加一个类并使用position: fixed;来完成此操作。您需要在div中添加一些填充以使其按照您的意愿显示。

Example for you here

IE不擅长支持任何滚动表。在任何情况下，以这种方式编辑表格都不是一个好主意。您可以将一个表格包含在div中，然后将其余信息包含在另一个表格中，另一个表格包含溢出自动

Another example

它并不完美，因为你有很多HTML视觉属性，你应该摆脱它们并只使用CSS。但这是基本功能，它应该适用于所有浏览器。

Answer 2

用div表示外围，然后是innera ..检查css

.outer {
    position:relative;
    padding:4em 0 3em 0;
    width:54em;
    background:bottom;
    margin:0 auto 3em auto;
}
.innera {
    overflow:auto;
    width:54em;
    height:9.6em;
    background:#eee;
    border:2px gray;
}
.outer thead tr {
    position:absolute;
    top:2em;
    height:1.5em;
    left:0;

}
.outer th, .outer td {
    width:10em;
    text-align:left;

我测试了代码并且它正在运行。在IE 6.0,7.0 ++中测试。代码来自互联网： - ）

在IE 6.0和IE 7.0中冻结列标题

2 个答案: