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

问题描述

Richard JP Le Guen在创建滚动html表时向我提供帮助。唯一的问题是，我不想让表标题与表行滚动。现在它的工作在他的例子使用span，但如果我使用它在我的表，它真的搞砸我的表标题。我已经在最后2小时尝试得到它排序，但我没有，因此我刚刚离开表标题，因为它是。

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.

那么什么问题是，是否有另一种方法能够使用css来确保在向下滚动表时不能滚动表标题？

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?

下面是我的html和css代码：

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

推荐答案

http://stackoverflow.com/questions/130564/i-need-my-html-tables-body-to-scroll-and-its-head-to-stay-put>我需要我的html表的主体滚动及其头部

check out I need my html table's body to scroll and its head to stay put

使用此带有固定页眉的纯CSS可滚动表

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