和如果你看一下我所有的在表中的标签标签，你可以看到，如果每个人都有自己的类不匹配表

Question

的宽度表中还有一个<thead>。<thead>和<th>如果你看一下我所有的在表中的<code><thead></code>标签<code><th></code>标签，你可以看到，如果每个人都有自己的类不匹配表

现在，除了我的表格标题之外，在CSS中的所有内容都可以使用。问题是我有一个滚动表，因为我有一个滚动表，我不希望我的表标题与表一起滚动。因此，我需要这个#tableWrapper thead tr，但是这个问题是这个问题的宽度和表格标题的宽度（th），它们没有像整个表格那样宽（99％），它是大约60％的路程，现在如果我没有一个thead我可以得到的表标题正确的大小，并像表一样宽，但这意味着表标题将随着表滚动所以我需要thead。但问题是<thead> and <th>没有像表格那么宽，为什么呢。

下面是表的代码：

<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

从我所看到的你不能用CSS来做到这一点。

HTML table with fixed headers?

HTML table with fixed headers and a fixed column?

有上面这些链接了几个解决方案，但他们都在某部分散架（IE7，Safari和IE9是主要的罪魁祸首。如果你真的想这样我会想想使用JavaScript jQuery插件有区域数量能够做到这一点

Answer 2

这似乎在IE工作6+和Firefox请让我知道别人怎么做或不工作：。

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