向下滚动 html 表格时不要滚动表格标题 [英] Do not scroll table headings when scrolling down a html table

问题描述

Richard JP Le Guen 在创建滚动 html 表格时为我提供了帮助.唯一的问题是我不希望表格标题随表格行一起滚动.现在它在他的示例中使用 span 起作用，但是如果我在我的表格中使用它，它真的会弄乱我的表格标题.在过去的 2 个小时里，我一直试图对其进行排序，但我没有，所以我只是将表格标题保留原样.

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

以下是我的 html 和 css 代码:

 
<div id="tableScroll"><表格边框=1 id="qandatbl" align="center"><头><tr><th class="col1">问题编号</th><th class="col2">选项类型</th><th class="col1">持续时间</th><th class="col2">Weight(%)</th><th class="col1">答案</th><th class="col2">视频</th><th class="col1">Audio</th><th class="col2">图像</th></tr></thead><tr><td class="qid"><?php echo $i;?></td><td class="选项"></td><td class="持续时间"></td><td class="weight"></td><td class="answer"></td><td class="视频"></td><td class="audio"></td><td class="图像"></td></tr></tbody>

#qandatbl{字体大小:12px；边框折叠:折叠；边距:0px；文字对齐:居中；左边距:自动；边距右:自动；边框:1px纯黑色；}.col1{背景色:#FCF6CF；}.col2{背景色:#FEFEF2；}.选项{溢出:隐藏；最大宽度:125px；最小宽度:125px；背景色:#FCF6CF；边框:1px纯黑色；}.期间{溢出:隐藏；最大宽度:125px；最小宽度:125px；背景色:#FEFEF2；边框:1px纯黑色；}.重量{溢出:隐藏；最大宽度:125px；最小宽度:125px；背景色:#FCF6CF；边框:1px纯黑色；}.回答{溢出:隐藏；最大宽度:125px；最小宽度:125px；背景色:#FEFEF2；边框:1px纯黑色；}.qid{溢出:隐藏；最大宽度:125px；最小宽度:125px；背景色:#FEFEF2；边框:1px纯黑色；}.视频{溢出:隐藏；最大宽度:350px；最小宽度:350px；背景色:#FCF6CF；边框:1px纯黑色；}.声音的{溢出:隐藏；最大宽度:350px；最小宽度:350px；背景色:#FEFEF2；边框:1px纯黑色；}.图片{溢出:隐藏；最大宽度:350px；最小宽度:350px；背景色:#FCF6CF；边框:1px纯黑色；}#tableWrapper {位置:相对；}#tableScroll {高度:350px；溢出:自动；边距顶部:20px;}

解决方案

查看 如何让表格的主体滚动但保持其头部固定?

使用这个 带有固定标题的纯 CSS 可滚动表

Richard JP Le Guen kindly provided me help when it comes to creating a scrolling html table. The only problem is that I don't want the table headings to scroll with the table rows. Now it worked in his example using span but if I use it in my table it really messes up my table headings. I have been for the last 2 hours try to get it sorted but I havn't so I have just left the table headings as it was.

So what question is that is there another way to be able to use css to make sure that table headings cannot be scrolled while scrolling down a table?

Below is my html and css code:

    <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;
}

解决方案

check out How can I let a table's body scroll but keep its head fixed in place?

using this Pure CSS Scrollable Table with Fixed Header

这篇关于向下滚动 html 表格时不要滚动表格标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！