Question

我有两个要对齐的html表（两个表的列宽度应相等）。这两个表的标题开头都应跨越两列，并且都应总共有四列。

发生的事情是即使定义了列的宽度，也会根据列的内容调整大小。

td,
th {
  padding: .5rem;
}

.red-header {
  font-weight: 700;
  background-color: rgb(184, 167, 177);
  text-align: start;
}

<table>
  <thead>
    <tr>
      <th colspan="2" width="35%" class="red-header">
        THIS IS A LONG LONG HEADER STRING
      </th>
      <th width='35%' />
      <th width="15%" />
      <th width="15%" />
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="35%">something</td>
      <td width="35%">something else</td>
      <td width="15%">something</td>
      <td width="15%">something else</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th colspan="2" width="35%" class="red-header">
        THIS IS A LONG LONG HEADER STRING
      </th>
      <th width='35%' />
      <th width="15%">something</th>
      <th width="15%">something else</th>
    </tr>
  </thead>
  <tbody />
</table>

无论内容如何，如何使列保持大小？

Answer 1

您在第二个表中将colspan设置为2，但第二个标题仍然存在，但缺少结束标记。如果您删除缺少标签的第二个标题，它应该可以解决您的问题。

<table>
  <thead>
    <tr>
      <th colspan="2" width="35%" class="red-header">
        THIS IS A LONG LONG HEADER STRING
      </th>
      <th width='35%' />
      <th width="15%" />
      <th width="15%" />
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="35%">something</td>
      <td width="35%">something else</td>
      <td width="15%">something</td>
      <td width="15%">something else</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th colspan="2" width="35%" class="red-header">
        THIS IS A LONG LONG HEADER STRING
      </th>

      <th width="15%">something</th>
      <th width="15%">something else</th>
    </tr>
  </thead>
  <tbody />
</table>

或关闭标签

<table>
  <thead>
    <tr>
      <th colspan="2" width="35%" class="red-header">
        THIS IS A LONG LONG HEADER STRING
      </th>
      <th width='35%' />
      <th width="15%" />
      <th width="15%" />
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="35%">something</td>
      <td width="35%">something else</td>
      <td width="15%">something</td>
      <td width="15%">something else</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th colspan="2" width="35%" class="red-header">
        THIS IS A LONG LONG HEADER STRING
      </th>
      <th width='35%' /></th>
      <th width="15%">something</th>
      <th width="15%">something else</th>
    </tr>
  </thead>
  <tbody />
</table>

Answer 2

我发现您的代码的一个错误是您在多个位置缺少标签的关闭..您可以同时使用colspan或同时使用宽度的百分比，这没有任何意义，您可以使用colspan < / p>

table{
  width:100%
}

<table border='1'>
  <thead>
    <tr>
      <th colspan="4" class="red-header">
        THIS IS A LONG LONG HEADER STRING
      </th>
      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >something</td>
      <td >something else</td>
      <td >something</td>
      <td >something else</td>
    </tr>
  </tbody>
</table>

<table border="1">
  <thead>
    <tr>
      <th colspan="4" width="35%" class="red-header">
        THIS IS A LONG LONG HEADER STRING
      </th>
      
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td >something</td>
      <td >something else</td>
      <td >something</td>
      <td >something else</td>
    </tr>
  </tbody>
</table>

CSS，HTML-colspan在不同的表上无法正常工作

2 个答案: