Slightly complicated HTML table with merged rows

Question

I have the following table:

Comm Layer	Implemented By
Application	Application
Transport	OS
Internet	OS
Link	OS
Link	Hardware

question from:https://stackoverflow.com/questions/65889034/slightly-complicated-html-table-with-merged-rows

Answer 1

In short: you cannot have a <tr> where all cells participate in a rowspan="" because that creates a zero-height row (as there's no row-specific content). I feel this is a design flaw in HTML.

One workaround is to have a zero-width column that always has non-rowspan="" cells (which are propped up with  , but hidden (using visibility: hidden;, not display: none;):

(My posted code comments out the removed cells with <!--<td>OS</td>--> for illustrative purposes, obviously you can remove those in your final version)

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>