html - 带有合并行的稍微复杂的 HTML 表格

Question

我有下表：

通讯层	实施者
应用	应用
运输	操作系统
互联网	操作系统
关联	操作系统
关联	硬件

<table>
  <thead>
    <tr>
      <th>Comm Layer</th>
      <th>Implemented By</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Application</td>
      <td>Application</td>
    </tr>
    <tr>
      <td>Transport</td>
      <td>OS</td>
    </tr>
    <tr>
      <td>Internet</td>
      <td>OS</td>
    </tr>
    <tr>
      <td>Link</td>
      <td>OS</td>
    </tr>
    <tr>
      <td>Link</td>
      <td>Hardware</td>
    </tr>
  </tbody>
</table>

我想合并两个显示“链接”的单元格和三个显示“操作系统”的单元格。我尝试rowspan以多种方式使用该属性，但无济于事。我能够合并两个“链接”单元格或三个“操作系统”单元格，但不能同时合并两者。

标签： htmlhtml-table

Answer 1

简而言之：您不能<tr>让所有单元格都参与其中，rowspan=""因为这会创建一个高度为零的行（因为没有特定于行的内容）。我觉得这是 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 之前，我一直在使用该技术。