html - 表格列的宽度不会设置

Question

如果你看看我所有的<th> <thead> 中的标签表格中的标签，你可以看到是否每个<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%(考虑到每种类型的列出现的次数，似乎每种出现两次)。