表 TD（行跨度）内容隐藏，TR 可见性设置为“折叠”

Question

我已经构建了一个 HTML 表，其中中间行使用 CSS 隐藏visibility:collapse

默认情况下，只有表的第一行和最后一行可见。

在此表中，右侧有一列是使用 rowspan 设置的。该列可以包含多行文本。

我的问题是，如果该列的高度大于默认显示的表格行（第一个和最后一个）的组合高度，则该列中放入的整个内容似乎会被截断。

.hide {
  visibility: collapse
}

body {
  padding: 2rem;
}

<table border="1">
  <tr>
    <td>A1</td>
    <td>A2</td>
    <td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
  </tr>
  <tr class="hide">
    <td>B1</td>
    <td>B2</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
  </tr>
</table>

我应该在 CSS 中进行哪些更改才能显示 rowspan 单元格的所有“文本”行而不是被截断？无法使用JavaScript。

Answer 1

display:none;我认为使用or更好visibility:hidden;。或者在TD上使用overflow:auto;，但是你会得到一个滚动条jsfiddle

关于visibility:collapse;查看css-tricks的这篇文章

.hide{

  /* Using this, will mess up everything */
  /* visibility:collapse; */
  
  /* Using this, will give you something where the middle row is hidden */
  /* visibility:hidden; */
  
  /* display none works the best */
  display: none;
}

<table border="1">
<tbody>
   <tr>
      <td>A1</td>
      <td>A2</td>
      <td rowspan="3">Text 1<br>Text 2<br>Text 3<br>Text 4<br>Text 5<br>Text 6</td>
   </tr>
   <tr class="hide">
      <td>B1</td>
      <td>B2</td>
   </tr>
   <tr>
      <td>C1</td>
      <td>C2</td>
   </tr>
</tbody>
</table>