Question: ```
<table>
   <tr>   <td rowspan="2">1</td>  <td>2</td>   </tr>
   <tr>   <td rowspan="2">3</td>               </tr>
   <tr>   <td>4</td>                           </tr>
</table>

```

seemingly only displays two rows:

[![enter image description here](https://i.stack.imgur.com/yClHg.png)](https://i.stack.imgur.com/yClHg.png)

The reason for hiding the second row [1 3] is, that the cells with text 1 and 3 are reduced in height. Is there a way to ensure, that the second row is visible in the display (not only in DOM)?

The problem gets clearer, if you look at the same table with an additional column:

```
<table>
   <tr>   <td rowspan="2">1</td>  <td>2</td> <td>0</td> </tr>
   <tr>   <td rowspan="2">3</td>             <td>0</td> </tr>
   <tr>   <td>4</td>                         <td>0</td> </tr>
</table>

```

which is displayed like:

[![enter image description here](https://i.stack.imgur.com/w1E7w.png)](https://i.stack.imgur.com/w1E7w.png)

Answer: 
You can add a height property to the row:

```html
<table border=1>
  <tr>
    <td rowspan="2">1</td>
    <td>2</td>
  </tr>
  <tr style="height: 1.5em">
    <td rowspan="2">3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
</table>
```
One suboptimal option could be to add an empty column:

```
<table>
   <tr> <td rowspan="2">1</td> <td>2</td>             <td class="void"></td> </tr>
   <tr>                        <td rowspan="2">3</td> <td class="void"></td> </tr>
   <tr> <td>4</td>                                    <td class="void"></td> </tr>
</table>

```

CSS:

```
table,td {border:1px solid}
.void {height:1em;padding:0;border:0}

```

However, the spacing between columns leads to unnecessary space for the added column:

[![Artificial empty column](https://i.stack.imgur.com/7Fhjc.png)](https://i.stack.imgur.com/7Fhjc.png)

As this problem could be solved with padding-left for TD and a cellspacing of 0 for the table, this solution would not be general enough, so I'm still waiting for a good idea.