html - <thead> 和 <th> 与表格的宽度不匹配

Question

如果你看看我所有的<th> <thead> 中的标签表格中的标签，你可以看到是否每个都有自己的类:col1，col2，col3，col4 ... col9 我也有一个<thead>在表中。

现在 css 中的所有内容都适用于表格，除了我的表格标题。问题是我有一个滚动表，因为我有一个滚动表我不希望我的表标题随表滚动。因此我需要这个#tableWrapper thead tr，问题是 thead 的宽度和表格标题的宽度 (th)，它们没有整个表格那么宽 (99%)，它是大约进行了大约 60%，现在如果我没有 thead，我将能够使表格标题达到正确的大小并与表格一样宽，但这意味着表格标题将随表格滚动所以我需要 thead。但问题是 <thead> and <th>没有 table 那么宽，这是为什么。

下面是表格代码:

<div id="tableWrapper">
<div id="tableScroll">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="col1">Question No</th>
<th class="col2">Question</th>
<th class="col3">Option Type</th>
<th class="col4">Duration</th>
<th class="col5">Weight(%)</th>
<th class="col6">Answer</th>
<th class="col7">Video</th>
<th class="col8">Audio</th>
<th class="col9">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="qid"><?php echo $i; ?></td>
<td class="question"></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>

下面是css；

            /*css for QandATable.php*/

            #qandatbl{ //table
                font-size:14px;
                border-collapse:collapse;
                text-align:center;
                margin-left:auto; 
                margin-right:auto;
                width:99%;
            }
            .col1{
            background-color:#FEFEF2;
            width:7%;
            border: 1px solid black;
            }
            .col2{
            background-color:#FCF6CF;
            width:16%;
            border: 1px solid black;    
            }   
            .col3{
            background-color:#FEFEF2; 
        width:7%;
            border: 1px solid black;
            }
            .col4{
            background-color:#FCF6CF;
        width:7%;
            border: 1px solid black;
            }

           .col5{
            background-color:#FEFEF2;
            width:7%;
            border: 1px solid black;
            }
            .col6{
            background-color:#FCF6CF;
            width:7%;
            border: 1px solid black;    
            }   
            .col7{
            background-color:#FEFEF2; 
        width:16%;
            border: 1px solid black;
            }
            .col8{
            background-color:#FCF6CF;
        width:16%;
            border: 1px solid black;
            }
                .col9{
            background-color:#FCF6CF;
        width:16%;
            border: 1px solid black;
            }

#tableWrapper {
  position:relative;
}
#tableScroll {
  height:300px;
  overflow:auto;  
  margin-top:20px;
}

#tableWrapper thead {
position:absolute;
top:-24px;
width:99%;
}`enter code here`

Answer 1

这似乎适用于 IE 6+ 和 Firefox。请让我知道其他人做什么或不做什么:

http://spruce.flint.umich.edu/~jalarie/jaa_kee.htm