不会设置表格列的宽度

Posted 2023-03-06

【中文标题】不会设置表格列的宽度

【英文标题】：Width for table columns will not set

【发布时间】：2012-01-07 03:05:35

【问题描述】：

如果您查看表中<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;

【参考方案1】：

1- 设置表格的宽度

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

【讨论】：

我把它们都放了 25% 以使其宽度总和为 100% 但我没有工作，它使标题更宽但整个标题没有像这页纸。相反，它与页面宽度的 1/3 一样宽

尝试设置表格的宽度。这就是百分比的相对关系。因此，如果没有表格宽度，它们可能会被忽略。使用 100% 使表格使用所有空间。

4 列中的每一个都出现了两次，所以 25% 等于 200%。

好的，谢谢，宽度的总和必须为 100% 还是可以更小？我所做的是将每列设置为 12.5%，并将“#tableWrapper tr”设置为 100%，（我将 th 包含在此 id 中并使其工作）

我相信如果它小于 100%，最后一列将自己占用缺失的百分比。不过我不确定。