HTML行列尺寸不同表格制作求助：第三行无法正常显示

你的代码存在三个问题导致第三行显示异常：

1. CSS样式语法错误 #

<style>块中，border: 1px solid black与border-collapse: collapse之间缺少分号，导致CSS解析失败，表格边框合并规则无法生效，影响整体布局。

2. 前两行单元格宽度总和超标 #

前两行的单元格宽度加起来是10%+12%+13%+10%+20%+25%+20%=110%，超过了表格的100%宽度，浏览器会自动压缩各列宽度，导致你设置的宽度值失效。

3. 第三行列数不匹配，未使用单元格合并 #

前两行有7个单元格，第三行只有3个，浏览器会自动补全缺失的单元格，导致布局混乱。你需要用colspan属性指定单元格要合并的列数，来实现三列布局。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
    }
  </style>
</head>
<body>
  <table style="width:100%">
    <tr style="height: 30px">
      <th style="width:10%"></th>
      <th style="width:12%"></th>
      <th style="width:13%"></th>
      <th style="width:10%"></th>
      <th style="width:20%"></th>
      <th style="width:25%"></th>
      <th style="width:10%"></th> <!-- 调整宽度，使总和为100% -->
    </tr>
    <tr style="height: 30px">
      <td style="width:10%"></td>
      <td style="width:12%"></td>
      <td style="width:13%"></td>
      <td style="width:10%"></td>
      <td style="width:20%"></td>
      <td style="width:25%"></td>
      <td style="width:10%"></td> <!-- 同步调整 -->
    </tr>
    <tr style="height: 120px">
      <td style="width:10%"></td>
      <td colspan="2" style="width:25%"></td> <!-- 合并第2、3列，对应12%+13%=25% -->
      <td colspan="4" style="width:65%"></td> <!-- 合并第4-7列，对应10%+20%+25%+10%=65% -->
    </tr>
  </table>
</body>
</html>

关键修改说明 #

• 给CSS样式补上缺失的分号，确保边框合并生效
• 调整前两行最后一个单元格的宽度，使整行宽度总和为100%，避免浏览器自动缩放
• 给第三行的单元格添加colspan属性，明确指定合并的列数，让行列数匹配，实现预期的三列布局

内容的提问来源于stack exchange，提问作者HB_Works