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，问题会变得更清楚：

<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

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

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

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

因为这个问题可以用 padding-left 的 TD 和 0 的 cellspacing 来解决 table，这个解决方案不够通用，所以我还在等待一个好主意.

Answer 2

您可以向行添加高度属性：

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

rowSpan 隐藏行

rowSpan hides rows

xhtml

html-table