不会设置表格列的宽度

Question

如果您查看表中<thead> 标记中的所有<th> 标记，您可以看到每个<th> 是否有自己的类：col1、col2、col3 和 col4。

我正在尝试为每个类设置最大和最小宽度，问题是它根本没有设置宽度。如果用百分比设置宽度就不行了，但是用px可以，但是我想用百分比，那为什么不设置宽度呢？

下面是表格代码：

<div id="tableWrapper">
  <div id="tableScroll">
    <table id="qandatbl" align="center">
      <thead>
        <tr>
          <th class="col2">Question No</th>
          <th class="col4">Question</th>
          <th class="col2">Option Type</th>
          <th class="col1">Duration</th>
          <th class="col2">Weight(%)</th>
          <th class="col1">Answer</th>
          <th class="col3">Video</th>
          <th class="col4">Audio</th>
          <th class="col3">Image</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody> 
    </table>
  </div>
</div>

下面是css；

#qandatbl{
  font-size:14px;
  border-collapse:collapse;
  text-align:center;
  margin-left:auto; 
  margin-right:auto;
}
.col1{
  background-color:#FCF6CF; 
  max-width:7%;
  min-width:7%; 
  border: 1px solid black;
}
.col2{
  background-color:#FEFEF2;
  max-width:7%;
  min-width:7%;
  border: 1px solid black;  
}   
.col3{
  background-color:#FEFEF2; 
  max-width:16%;
  min-width:16%;    
  border: 1px solid black;
}
.col4{
  background-color:#FCF6CF;
  max-width:16%;
  min-width:16%;    
  border: 1px solid black;
}
#tableWrapper {
  position:relative;
}
#tableScroll {
  height:300px;
  overflow:auto;  
  margin-top:20px;
}
#tableWrapper thead tr {
  position:absolute;
  top:-24px;
}

Answer 1

1- 设置表格的宽度

2- 调整您的百分比，使它们的总和为 100%（考虑到每种类型的列出现的次数，似乎每种列出现两次）。