如何消除多个HTML Table实现异列数行时的空白间隙？

我需要在HTML中创建包含不同列数行的表格，目前采用多个Table分别实现对应列数的行，代码及样式表如下，但两个Table之间存在无法消除的空白间隙，请问如何解决？

原HTML代码 #

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Home</title>
</head>
<body>

<table class="border paddingDefault"  style="width:60%; border-collapse: collapse;">
<thead>
<tr>
<th valign="middle"  width="55%" style="background-color: cyan;" class="column border" ><span style="font-weight: bold;">Name of rule</span></th>
<th valign="middle"  width="5%" style="background-color: cyan;" class="column border" ><span style="font-weight: bold;">Status</span></th>
</tr>
</thead>
<tbody>
<tr>
<td valign="middle" class="borderTop paddingDefault">The rule name of index 0</td>
<td valign="middle" align="center" class="borderTop paddingDefault" style="background-color: green;">OK</td>
</tr>
<tr style="border-collapse: collapse;border: 0px; padding:0; margin:0;">
<td valign="middle" class="borderTop paddingDefault">The rule name of index 0</td>
<td valign="middle" align="center" class="borderTop paddingDefault" style="background-color: red;">KO</td>
</tr>
</tbody>
</table>

<table class="borderNone paddingDefault"  style="width:60%; border-collapse: collapse;border: 0px; padding:0; margin:0;">
<thead>
<th valign="middle"  width="100%"/>
</thead>
<tbody>
<tr>
<td valign="middle" class="border paddingDefault">the error of index 0<br/>
the error of index 1<br/>
the error of index 2<br/>
</td>
</tr>
</tbody>
</table>
</body>
</html>

原CSS样式表 #

table.middle {
   vertical-align: middle;
}

table.borderNone, th.borderNone, td.borderNone {
   border: none;
   border-collapse: collapse;
}

table.paddingDefault, th.paddingDefault, td.paddingDefault {
   padding: 10px 10px;
}

table.border, th.border, td.border {
   border: 1pt solid black;
   border-collapse: collapse;
}

td.borderTop {
   border-right: 1pt solid black;
   border-left: 1pt solid black;
   border-top: 1pt solid black;
   border-bottom: none;
   border-collapse: collapse;
}

问题原因 #

表格属于块级元素，浏览器默认会为其添加margin；另外两个表格代码之间的换行、空格会被解析为空白字符，再加上表格默认的基线对齐方式，多重因素共同导致了间隙出现。

解决方法 #

方法1：消除表格间的空白字符 #

把两个表格的代码连在一起，或者用注释隔开换行，避免空白字符被解析：

<table class="border paddingDefault"  style="width:60%; border-collapse: collapse;">
<!-- 第一个表格内容 -->
</table><!--
--><table class="borderNone paddingDefault"  style="width:60%; border-collapse: collapse;border: 0px; padding:0; margin:0;">
<!-- 第二个表格内容 -->
</table>

方法2：通过CSS强制清除间距 #

在样式表中添加以下规则，覆盖浏览器默认样式：

table {
  margin: 0;
  padding: 0;
  border-spacing: 0;
  vertical-align: top; /* 避免基线对齐产生的间隙 */
}
/* 针对第二个表格额外调整 */
table.borderNone {
  margin-top: 0;
}

方法3：合并为单个表格（推荐） #

根本不需要用两个表格，利用表格的colspan属性就能实现跨列行，彻底避免多表格间隙问题：

修改后的HTML代码：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Home</title>
</head>
<body>

<table class="border paddingDefault"  style="width:60%; border-collapse: collapse;">
<thead>
<tr>
<th valign="middle"  width="55%" style="background-color: cyan;" class="column border" ><span style="font-weight: bold;">Name of rule</span></th>
<th valign="middle"  width="5%" style="background-color: cyan;" class="column border" ><span style="font-weight: bold;">Status</span></th>
</tr>
</thead>
<tbody>
<tr>
<td valign="middle" class="borderTop paddingDefault">The rule name of index 0</td>
<td valign="middle" align="center" class="borderTop paddingDefault" style="background-color: green;">OK</td>
</tr>
<tr>
<td valign="middle" class="borderTop paddingDefault">The rule name of index 0</td>
<td valign="middle" align="center" class="borderTop paddingDefault" style="background-color: red;">KO</td>
</tr>
<!-- 用colspan="2"让单元格占据两列 -->
<tr>
<td colspan="2" valign="middle" class="border paddingDefault">the error of index 0<br/>
the error of index 1<br/>
the error of index 2<br/>
</td>
</tr>
</tbody>
</table>

</body>
</html>

对应的CSS可以简化，删除borderNone相关规则，单个表格统一处理边框即可。

内容的提问来源于stack exchange，提问作者Hervé Girod