包含合并行的稍微复杂的HTML表

Question

我有以下表格:

tbody> <<tr>互联网链接链接

Comm Layer	implementation By
应用	应用
交通	OS
	OS
	OS
	硬件

简而言之:您不能拥有所有单元格都参与rowspan=""的<tr>，因为这会创建零高度行(因为没有行特定的内容)。我觉得这是HTML的设计缺陷。

一个解决方法是有一个零宽度列，总是有非rowspan=""单元格(这是支撑与 ，但隐藏(使用visibility: hidden;，而不是display: none;):

(我发布的代码注释了删除的单元格与<!--<td>OS</td>-->用于说明目的，显然你可以删除那些在你的最终版本)

table {
border: 1px solid #999;
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
}
tr > *:nth-child(1) { visibility: hidden; }

<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td>&nbsp;</td>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Transport</td>
<td rowspan="3">OS</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Internet</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td>&nbsp;</td>
<td rowspan="2">Link</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td>&nbsp;</td>
<!--<td>Link</td>-->
<td>Hardware</td>
</tr>
</tbody>
</table>

可能有改进使用更现代的CSS技术来强制最小行高-我一直在使用 技术，因为我在2004年停止使用Dreamweaver。

<!-- Try this one -->
<table align="center" cellspacing="0" cellspadding=="0">
<thead>
<tr>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td rowspan="2">OS</td>
</tr>
<tr>
<td>Internet</td>
</tr>
<tr>
<td rowspan="2">Link</td>
<td>OS</td>
</tr>
<tr>
<td>Hardware</td>
</tr>
</tbody>
</table>