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％（考虑到每种类型的列出现的次数，这似乎是每次两次）。

表列的宽度不会设置

1 个答案: