rowSpan隐藏行

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>

似乎只显示两行：

隐藏第二行[1 3]的原因是，具有文本1和3的单元格的高度减小。有没有办法确保第二行在显示中可见（不仅在DOM中）？

如果您使用其他列查看同一个表，问题会变得更加清晰：

<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>

显示如下：

Answer 1

您可以在行中添加height属性：

<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>

Answer 2

一个次优选项可能是添加一个空列：

<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}

但是，列之间的间距会导致添加列的空间不必要：

由于这个问题可以通过填充左边的TD和表格的单元间距为0来解决，因此这个解决方案不够通用，所以我还在等待一个好主意。