向下滚动html表时不要滚动表格标题

参见英文答案 > How can I let a table’s body scroll but keep its head fixed in place?                                    18个
Richard JP Le Guen在创建滚动html表时给了我很多帮助.唯一的问题是我不希望表标题与表行一起滚动.现在它在他的例子中使用span工作但是如果我在我的表中使用它它真的弄乱了我的表标题.我已经过了最后2个小时尝试对它进行排序,但我没有这样,所以我刚刚离开了桌面标题.

那么问题是,还有另一种方法可以使用css来确保在向下滚动表格时无法滚动表格标题吗?

下面是我的html和css代码:

    <div id="tableWrapper">
    <div id="tableScroll">
    <table border=1 id="qandatbl" align="center">
    <thead>
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    <th class="col2">Weight(%)</th>
    <th class="col1">Answer</th>
    <th class="col2">Video</th>
    <th class="col1">Audio</th>
    <th class="col2">Image</th>
    </tr>
    </thead>
    <tbody>
        <tr>
    <td class="qid"><?php echo $i; ?></td>
    <td class="options"></td>
    <td class="duration"></td>
    <td class="weight"></td>
    <td class="answer"></td>
    <td class="video"></td>
    <td class="audio"></td>
    <td class="image"></td>
    </tr>
    </tbody>
</table>
</div>
</div>

            #qandatbl{
                font-size:12px;
                border-collapse:collapse;
                margin:0px;
                text-align:center;
                margin-left:auto; 
                margin-right:auto;
                border:1px solid black;
            }
            .col1{
            background-color:#FCF6CF;   
            }
            .col2{
            background-color:#FEFEF2;   
            }   
                .options{
            overflow:hidden;
            max-width:125px;       
            min-width:125px;
            background-color:#FCF6CF;
            border:1px solid black;
                }
            .duration{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FEFEF2;
            border:1px solid black;
                }
            .weight{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FCF6CF;
            border:1px solid black;
                }
             .answer{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FEFEF2;
            border:1px solid black;
                }
            .qid{
            overflow:hidden;
            max-width:125px;
            min-width:125px;
            background-color:#FEFEF2;
            border:1px solid black;
                }
            .video{
            overflow:hidden;
            max-width:350px;
            min-width:350px;
            background-color:#FCF6CF;
            border:1px solid black;
                }
            .audio{
            overflow:hidden;
            max-width:350px;
            min-width:350px;
            background-color:#FEFEF2;
            border:1px solid black;
                }
            .image{
            overflow:hidden;
            max-width:350px;
            min-width:350px;
            background-color:#FCF6CF;
            border:1px solid black;
                }
             #tableWrapper {
  position:relative;
}
#tableScroll {
  height:350px;
  overflow:auto;  
  margin-top:20px;
}
最佳答案

转载注明原文:向下滚动html表时不要滚动表格标题 - 代码日志