<thead>和<th>如果你看一下我所有的在表中的<code><thead></code>標籤<code><th></code>標籤，你可以看到，如果每個人都有自己的類不匹配表

的寬度表中還有一個<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`

來源

2011-11-27 BruceyBandit