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

Question

当我用 colspan 合并两列或更多列时，我注意到在 table 的末尾添加了一个新列，这就像 colspan 推列而不是合并主题.是否有任何解决方案可以合并单元格而看不到添加到 table.

末尾的新列

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> 中的列换行，包括 table 标题，如果您使用一个。否则列号在每一行中都不匹配，浏览器会自动修复此问题。

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

Merge columns with CSS add new columns to the end of table

css

merge

html-table