Question

当我使用colspan合并两个或更多列时，我注意到在表的末尾添加了一个新列，就像colspan推送列而不是合并主题。有没有合并单元格的解决方案，而没有看到添加到表格末尾的新列。

Answer 1

td:nth-of-type(2n) {
  border: 1px solid #333;
  background-color: #f0f0f0;
  padding: 0.5em;
}

<!DOCTYPE html>
<html>

<head>
  <title>Table demos</title>
</head>

<body style="margin: 0;">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="2">Col 1 + 2</td>
      <td>Col 3</td>
    </tr>
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
    </tr>
  </table>
  <p>3rd col missing in second row, so it looks like the browser is adding a column in row one, which it doesn't.</p>
</body>

</html>

如果你使用的话，你必须在每个<tr>中包括列，包括表格标题。否则列数在每一行都不匹配，浏览器会自动修复此行。

使用CSS合并列会将新列添加到表的末尾

1 个答案: