我已经构建了一个 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。
嘿，我尝试过在一条 2px 实线上进行动画，从中心到末端填充白色，但失败了，因为它只是从右到左填充，而不是从相反的方向获得。任何人都可以告诉我如何创建这样的动画：这只是结构。从点+开始2px的高度和100px的宽度，并从中心到两端从左到右等长地填充颜色，完成这种类型的动画。希望我已经详细解释了我的问题。
[----------+----------]
[---------+++---------]
[--------+++++--------]
[-------+++++++-------]
[------+++++++++------]
[-----+++++++++++-----]
[----+++++++++++++----]
[---+++++++++++++++---]
[--+++++++++++++++++--]
[-+++++++++++++++++++-]
[+++++++++++++++++++++]