blocks|key|2440266|text|我认为最好使用display:none;或visibility:hidden;。或者在TD上使用overflow:auto;，但是这样就会得到一个滚动条小提琴。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2440267|关于visibility:collapse;，请查看css-技巧上的这篇文章|2440268|​|2440269|.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;
}|code-block|syntax|javascript|2440270|<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>|2440271|2440272|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/njsvm6q1/44/|1|https://css-tricks.com/almanac/properties/v/visibility/#aa-collapse^0|7|D|L|I|1C|E|24|3|0|0|2|K|Q|6|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|F|3|G|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|H|3|I|5|6|7|1H|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1J|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1K|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]]]

<p>I think it's better to use <code>display:none;</code> or <code>visibility:hidden;</code>.
Or use <code>overflow:auto;</code> on TD, but then you will get a scrollbar <a href="https://jsfiddle.net/njsvm6q1/44/" rel="nofollow noreferrer">jsfiddle</a></p>
<p>About <code>visibility:collapse;</code> check out this post from <a href="https://css-tricks.com/almanac/properties/v/visibility/#aa-collapse" rel="nofollow noreferrer">css-tricks</a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="1"&gt;
&lt;tbody&gt;
   &lt;tr&gt;
      &lt;td&gt;A1&lt;/td&gt;
      &lt;td&gt;A2&lt;/td&gt;
      &lt;td rowspan="3"&gt;Text 1&lt;br&gt;Text 2&lt;br&gt;Text 3&lt;br&gt;Text 4&lt;br&gt;Text 5&lt;br&gt;Text 6&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr class="hide"&gt;
      &lt;td&gt;B1&lt;/td&gt;
      &lt;td&gt;B2&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td&gt;C1&lt;/td&gt;
      &lt;td&gt;C2&lt;/td&gt;
   &lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2440274|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2440275|.hide+{
++position:+absolute;
++left:+-999em;
}

body+{
++padding:+2rem;
}|code-block|syntax|javascript|2440276|<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>|2440277|2440278|display:+none;元素从正常流中移除并隐藏；它所占用的空间被折叠。内容被屏幕阅读器忽略。因此，如果您想隐藏它，但使它对屏幕阅读器可见，您可以使用上面的代码在我看来。|offset|length|style|CODE|2440279|entityMap^0|0|0|0|0|0|E|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@$L|W|M|X|N|O]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.hide {
  position: absolute;
  left: -999em;
}

body {
  padding: 2rem;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;td&gt;A1&lt;/td&gt;
    &lt;td&gt;A2&lt;/td&gt;
    &lt;td rowspan="3"&gt;Text 1&lt;br&gt;Text 2&lt;br&gt;Text 3&lt;br&gt;Text 4&lt;br&gt;Text 5&lt;br&gt;Text 6&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="hide"&gt;
    &lt;td&gt;B1&lt;/td&gt;
    &lt;td&gt;B2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;C1&lt;/td&gt;
    &lt;td&gt;C2&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p><code>display: none;</code>
Element is removed from the normal flow and hidden; the space it occupied is collapsed.
Content is ignored by screen readers.
So, if you want to hide it but make it visible for screen readers you can use the above code in my opinion.</p>
<hr />


blocks|key|568020|text|如果确实需要，可以将line-height:+0;添加到.hide中，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|568021|.hide+{
++visibility:+collapse;
++line-height:+0;+
}|code-block|syntax|javascript|568022|这里给出了这个解决方案：CSS：“可见性:崩溃”仍然占用空间。|568023|我仍然建议在visibility:collapse上应用td，因为它会给rowspan单元格留出更多的空间，因为您可以看到两个表之间的差异。|568024|我仍然更喜欢使用display:none;，但这将取决于您想要做什么。|568025|演示|568026|​|568027|#hide+.hide+{
++visibility:+collapse;
++line-height:+0;+
}

body+{
++padding:+2rem;
}
/*+SECOND+table+-+collapse+on+td+*/
#td-hide+.hide+>+td{
++visibility:+collapse;
++line-height:+0;
++height:0;
++border:+0;
++padding:0;
++margin:0;
}
.container{
++display:flex;
}
.container+>+div{
++margin:0+auto;
}|568028|<div+class="container">
++<div>
++++<h3>visibility:+collapse+on+tr</h3>
++++<table+id="hide"+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>
++</div>
++++
++<div>
++++<h3>visibility:+collapse+on+td</h3>
++++<table+id="td-hide"+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>
++</div>
</div>|568029|568030|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/45861594/css-visibility-collapse-still-takes-up-space/45864060#45864060^0|A|F|S|5|0|0|C|J|0|0|6|J|S|2|10|7|0|8|D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|M|3|N|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1R|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1S|8|@]|D|@]|E|$]]|$1|U|3|V|5|H|7|1T|8|@]|D|@]|E|$I|J]]|$1|W|3|X|5|H|7|1U|8|@]|D|@]|E|$I|J]]|$1|Y|3|T|5|6|7|1V|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]]|10|$11|$5|12|13|14|E|$15|16]]]]

<p>If you really need, you can always add <code>line-height: 0;</code> to <code>.hide</code> as below:</p>
<pre class="lang-css prettyprint-override"><code>.hide {
  visibility: collapse;
  line-height: 0; 
}
</code></pre>
<p>This solution has been given here: <a href="https://stackoverflow.com/questions/45861594/css-visibility-collapse-still-takes-up-space/45864060#45864060">CSS: &quot;visibility: collapse&quot; still takes up space</a></p>
<p>I would still recommend to apply the <code>visibility:collapse</code> on the <code>td</code> as it would let more space to the <code>rowspan</code> cell as you can see the diff between the 2 tables.</p>
<p>I still prefer the use of <code>display:none;</code> but it would depend what you are trying to do.</p>
<h2>DEMO</h2>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#hide .hide {
  visibility: collapse;
  line-height: 0; 
}

body {
  padding: 2rem;
}
/* SECOND table - collapse on td */
#td-hide .hide &gt; td{
  visibility: collapse;
  line-height: 0;
  height:0;
  border: 0;
  padding:0;
  margin:0;
}
.container{
  display:flex;
}
.container &gt; div{
  margin:0 auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div&gt;
    &lt;h3&gt;visibility: collapse on tr&lt;/h3&gt;
    &lt;table id="hide" border="1"&gt;
      &lt;tr&gt;
        &lt;td&gt;A1&lt;/td&gt;
        &lt;td&gt;A2&lt;/td&gt;
        &lt;td rowspan="3"&gt;Text 1&lt;br&gt;Text 2&lt;br&gt;Text 3&lt;br&gt;Text 4&lt;br&gt;Text 5&lt;br&gt;Text 6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="hide"&gt;
        &lt;td&gt;B1&lt;/td&gt;
        &lt;td&gt;B2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;C1&lt;/td&gt;
        &lt;td&gt;C2&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
    &lt;!-- Second table with collapse on td --&gt;
  &lt;div&gt;
    &lt;h3&gt;visibility: collapse on td&lt;/h3&gt;
    &lt;table id="td-hide" border="1"&gt;
      &lt;tr&gt;
        &lt;td&gt;A1&lt;/td&gt;
        &lt;td&gt;A2&lt;/td&gt;
        &lt;td rowspan="3"&gt;Text 1&lt;br&gt;Text 2&lt;br&gt;Text 3&lt;br&gt;Text 4&lt;br&gt;Text 5&lt;br&gt;Text 6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="hide"&gt;
        &lt;td&gt;B1&lt;/td&gt;
        &lt;td&gt;B2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;C1&lt;/td&gt;
        &lt;td&gt;C2&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|39363|text|你好，如果你需要正确显示你的内容，你应该添加一个类并使这个类宽度:+auto；溢出:+auto；高度:+auto;，我建议您应用这个->|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|39364|​|39365|.hide+{
++visibility:+collapse
}

body+{
++padding:+2rem;
}

.meta+{
++width:+auto;
++overflow:+auto;
++height:+auto;
}|code-block|syntax|javascript|39366|<table+border="1">
++<tr>
++++<td>A1</td>
++++<td>A2</td>
++++<td+class="meta"+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>|39367|39368|但这将取决于你想要做什么。|39369|entityMap^0|U|R|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>Hello if you need display your content properly, you should to add a class and make this class <strong>width: auto; overflow: auto; height: auto;</strong> I recommend to you apply this -&gt;</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.hide {
  visibility: collapse
}

body {
  padding: 2rem;
}

.meta {
  width: auto;
  overflow: auto;
  height: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;td&gt;A1&lt;/td&gt;
    &lt;td&gt;A2&lt;/td&gt;
    &lt;td class="meta" rowspan="3"&gt;Text 1&lt;br&gt;Text 2&lt;br&gt;Text 3&lt;br&gt;Text 4&lt;br&gt;Text 5&lt;br&gt;Text 6&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="hide"&gt;
    &lt;td&gt;B1&lt;/td&gt;
    &lt;td&gt;B2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;C1&lt;/td&gt;
    &lt;td&gt;C2&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>
<p>but it would depend what you are trying to do.</p>


blocks|key|2440297|text|通过使用这段代码，您可以使用position:+absolute和top:+-1000000px实现所需的输出。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2440298|​|2440299|.hide+{
++position:+absolute;
++top:+-100000px;
}

body+{
++padding:+2rem;
}|code-block|syntax|javascript|2440300|<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<br>Text+7<br>Text+8<br>Text+9</td>
++</tr>
++<tr+class="hide">
++++<td>B1</td>
++++<td>B2</td>
++</tr>
++<tr>
++++<td>C1</td>
++++<td>C2</td>
++</tr>
</table>|2440301|2440302|我希望这能解决你的问题。|2440303|entityMap^0|E|I|X|F|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|12|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|S|$]]

<p>You can use <code>position: absolute </code> and <code>top: -1000000px</code>  By using this code you can achieve your required output.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.hide {
  position: absolute;
  top: -100000px;
}

body {
  padding: 2rem;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;td&gt;A1&lt;/td&gt;
    &lt;td&gt;A2&lt;/td&gt;
    &lt;td rowspan="3"&gt;Text 1&lt;br&gt;Text 2&lt;br&gt;Text 3&lt;br&gt;Text 4&lt;br&gt;Text 5&lt;br&gt;Text 6&lt;br&gt;Text 7&lt;br&gt;Text 8&lt;br&gt;Text 9&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="hide"&gt;
    &lt;td&gt;B1&lt;/td&gt;
    &lt;td&gt;B2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;C1&lt;/td&gt;
    &lt;td&gt;C2&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>
<p>I hope this will resolve your issue.</p>


blocks|key|2440404|text|深入研究这个问题，很明显，问题描述和示例中构建<td+rowspan="3">的方式使每个人都偏离了轨道。包括我..。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2440405|在经历了令人沮丧的几个小时之后，答案其实很简单:+OP试图将6行文本强制放入3行空间，因为使用了5+<br>__s。内容空间不够，所以单元格就会溢出。行跨度不应读3，而应读6！|2440406|一旦发现了空间问题，一种解决方案是创建更多的表行来容纳6行，并安排使用滚动条，当表中可用的行少于6行时，同时裁剪溢出的单元格。|2440407|在页面表:表元素:在小空间中显示大表中，MDN将表定义为table+{+display:+block;+overflow:+auto+}，并引入tbody+{+white-space:+nowrap+}以支持表内容的滚动。|2440408|我创建了一些注释代码，显示了原始的和解决方案1，并为类.hide和其他行提供了简单的切换。|2440409|我喜欢吗？不，远非如此，但表机制似乎就是这样工作的。我不认为这是个窃听器，只是我们需要解决的问题.|2440410|更新|BOLD|2440411|在回答@MaxiGui下面的公平点时，我没有遵守的操作，“我应该在CSS中更改什么，以获得行跨度单元格的所有行”文本“而不是被截断的”问题“，我添加了另一个解决方案。|2440412|添加的解决方案2显示了OP原始代码，但只需在.hide+/table-row之间切换类，而不是在visibility:+collapse/visible之间切换。|2440413|因为如果必须将元素的所有大小属性设置为0+(零，空值)才能模拟display:+none，那么使用display属性而不是visibility来隐藏表行要简单得多。|2440414|但是，“任择议定书”没有明确提到保留visibility的要求.|2440415|​|2440416|/*+original+code+*/
body++++{+padding:+2rem+}
.hide+++{+visibility:+collapse+}

/*+solution+1+*/
.solution+{
++++display:+inline-block;
++++overflow:+auto;+/*+to+show+scrollbars+when+required+*/
}

/*
++++MDN+excerpt
++++(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#displaying_large_tables_in_small_spaces)

++++When+looking+at+these+styles+you'll+notice+that+table's+display+property
++++has+been+set+to+block.+While+this+allows+scrolling,+the+table+loses+some
++++of+its+integrity,+and+table+cells+try+to+become+as+small+as+possible.
++++To+mitigate+this+issue+white-space+has+been+set+to+nowrap+on+the+<tbody>.
*/

.solution+tbody+{+white-space:+nowrap+}

.solution+td+{
++++overflow:+hidden;++++/*+clips+excess+content+*/
++++vertical-align:+top;+/*+moves+content+to+top+of+cell+*/
}

#tgl-line+~+.solution+{
++++min-width:+calc(6.75rem+%2B+17px);+/*+create+some+room+for+content+and+scrollbar+*/
++++/*+just+for+demo,+change+to+max-width+when+.solution+{+display:+block+}+*/
}

#tgl-line:checked+~+table+.hide+++++{+visibility:+visible+}+/*+both+tables+*/
#tgl-line:checked+~+.solution+++++++{+min-width:+6.75rem++}+/*+solution+only+*/

#tgl-rows+++++++++~+.solution+.rows+{+display:+none+}+++++++/*+additional+rows+hidden+*/
#tgl-rows:checked+~+.solution+.rows+{+display:+table-row+}++/*+in+view...+*/

/*+solution+2+*/
.hide-d+++++++++++++++++++++++++++++{+display:+none+}+/*+alt+classname+for+solution+2+*/
#tgl-line:checked+~+table+.hide-d+++{+display:+table-row+}

/*+eye-candy+*/
h2+{+margin-top:+4rem+}|code-block|syntax|javascript|2440417|<input+id+="tgl-line"+type="checkbox">
<label+for="tgl-line">toggle+.hide+(all+examples)</label>

<h2>original:+toggle+'visibility'+(rowspan=3)</h2>
<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>

<h2>solution+1:+toggle+'visibility'+(rowspan=6)</h2>

<input+id+="tgl-rows"+type="checkbox">
<label+for="tgl-rows">toggle+rows</label>
<br><br>
<table+class="solution"+border="1">
++++<tbody>
++++++++<tr>
++++++++++++<td>A1</td>
++++++++++++<td>A2</td>
++++++++++++<td+rowspan="6"+class="special">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>
++++++++<tr+class="rows">
++++++++++++<td>D1</td>
++++++++++++<td>D2</td>
++++++++</tr>
++++++++<tr+class="rows">
++++++++++++<td>E1</td>
++++++++++++<td>E2</td>
++++++++</tr>
++++++++<tr+class="rows">
++++++++++++<td>F1</td>
++++++++++++<td>F2</td>
++++++++</tr>
++++</tbody>
</table>

<h2>solution+2:+toggle+'display'+(rowspan=3)</h2>
<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-d">
++++<td>B1</td>
++++<td>B2</td>
++</tr>
++<tr>
++++<td>C1</td>
++++<td>C2</td>
++</tr>
</table>|2440418|2440419|。|2440420|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#displaying_large_tables_in_small_spaces^0|N|G|0|1E|4|29|1|2E|1|0|0|S|14|20|T|3|F|0|0|R|5|0|0|0|2|0|O|17|0|M|5|T|9|1C|K|1X|7|0|J|1|V|D|1D|7|1P|A|0|I|A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1N|8|@$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1U|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1V|8|@$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]]|D|@$9|20|A|21|1|22]]|E|$]]|$1|L|3|M|5|6|7|23|8|@$9|24|A|25|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|26|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|27|8|@$9|28|A|29|B|R]]|D|@]|E|$]]|$1|S|3|T|5|6|7|2A|8|@$9|2B|A|2C|B|R]]|D|@]|E|$]]|$1|U|3|V|5|6|7|2D|8|@$9|2E|A|2F|B|C]|$9|2G|A|2H|B|C]|$9|2I|A|2J|B|C]|$9|2K|A|2L|B|C]]|D|@]|E|$]]|$1|W|3|X|5|6|7|2M|8|@$9|2N|A|2O|B|C]|$9|2P|A|2Q|B|C]|$9|2R|A|2S|B|C]|$9|2T|A|2U|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|2V|8|@$9|2W|A|2X|B|C]]|D|@]|E|$]]|$1|10|3|11|5|6|7|2Y|8|@]|D|@]|E|$]]|$1|12|3|13|5|14|7|2Z|8|@]|D|@]|E|$15|16]]|$1|17|3|18|5|14|7|30|8|@]|D|@]|E|$15|16]]|$1|19|3|11|5|6|7|31|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|6|7|32|8|@]|D|@]|E|$]]|$1|1C|3|-4|5|6|7|33|8|@]|D|@]|E|$]]]|1D|$1E|$5|1F|1G|1H|E|$1I|1J]]]]

<p>Digging into this problem it became clear that the problem description and the way the <code>&lt;td rowspan=&quot;3&quot;&gt;</code> is constructed in the example puts everyone off track. Including me...</p>
<p>The answer, after some utter frustrating hours, is actually quite simple:
<em>the OP is trying to force 6 rows of text into a 3 rows space because of the 5 <code>&lt;br&gt;</code>s</em>. There is just not room enough for the content, so the cell overflows. The rowspan should not read <code>3</code>, but <code>6</code>!</p>
<p>Once the room issue has been revealed, one solution is to create more table rows to accommodate for the 6 rows and make arrangements for using a scrollbar, while clipping the overflowing cell when there are less than 6 rows available in the table.</p>
<p>On page <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#displaying_large_tables_in_small_spaces" rel="nofollow noreferrer">table: The Table element: Displaying large tables in small spaces</a> MDN defines a table as <code>table { display: block; overflow: auto }</code> and introduces <code>tbody { white-space: nowrap }</code> to enable scrolling of table content.</p>
<p>I created some commented code showing the <em>original</em> and <em>solution 1</em> with simple toggles for class <code>.hide</code> and additional rows.</p>
<p>Do I like it? No, far from, but this is how the table mechanism appears to work. I don't think it is a bug, just something we need to work around...</p>
<p><strong>UPDATE</strong></p>
<p>In reply to @MaxiGui's fair point below, me not honoring the OPs <strong>&quot;What should I change in the CSS to get all the lines of &quot;Text&quot; of the rowspan cell displayed instead of being truncated&quot;</strong> question, I added another solution.</p>
<p>Added <em>solution 2</em> shows the OP original code, but simply toggles class <code>.hide</code> between <code>display: none</code>/<code>table-row</code> instead of <code>visibility: collapse</code>/<code>visible</code>.</p>
<p>Because if all size properties of an element have to be set to <code>0</code> (zero, nullified) to mimick <code>display: none</code>, it is far less complicated to use the <code>display</code> property instead of <code>visibility</code> to hide a table row.</p>
<p>FYI, the OP did not explicitely mention the requirement to retain <code>visibility</code>...</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* original code */
body    { padding: 2rem }
.hide   { visibility: collapse }

/* solution 1 */
.solution {
    display: inline-block;
    overflow: auto; /* to show scrollbars when required */
}

/*
    MDN excerpt
    (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#displaying_large_tables_in_small_spaces)

    When looking at these styles you'll notice that table's display property
    has been set to block. While this allows scrolling, the table loses some
    of its integrity, and table cells try to become as small as possible.
    To mitigate this issue white-space has been set to nowrap on the &lt;tbody&gt;.
*/

.solution tbody { white-space: nowrap }

.solution td {
    overflow: hidden;    /* clips excess content */
    vertical-align: top; /* moves content to top of cell */
}

#tgl-line ~ .solution {
    min-width: calc(6.75rem + 17px); /* create some room for content and scrollbar */
    /* just for demo, change to max-width when .solution { display: block } */
}

#tgl-line:checked ~ table .hide     { visibility: visible } /* both tables */
#tgl-line:checked ~ .solution       { min-width: 6.75rem  } /* solution only */

#tgl-rows         ~ .solution .rows { display: none }       /* additional rows hidden */
#tgl-rows:checked ~ .solution .rows { display: table-row }  /* in view... */

/* solution 2 */
.hide-d                             { display: none } /* alt classname for solution 2 */
#tgl-line:checked ~ table .hide-d   { display: table-row }

/* eye-candy */
h2 { margin-top: 4rem }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id ="tgl-line" type="checkbox"&gt;
&lt;label for="tgl-line"&gt;toggle .hide (all examples)&lt;/label&gt;

&lt;h2&gt;original: toggle 'visibility' (rowspan=3)&lt;/h2&gt;
&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;td&gt;A1&lt;/td&gt;
    &lt;td&gt;A2&lt;/td&gt;
    &lt;td rowspan="3"&gt;Text 1&lt;br&gt;Text 2&lt;br&gt;Text 3&lt;br&gt;Text 4&lt;br&gt;Text 5&lt;br&gt;Text 6&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="hide"&gt;
    &lt;td&gt;B1&lt;/td&gt;
    &lt;td&gt;B2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;C1&lt;/td&gt;
    &lt;td&gt;C2&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;h2&gt;solution 1: toggle 'visibility' (rowspan=6)&lt;/h2&gt;

&lt;input id ="tgl-rows" type="checkbox"&gt;
&lt;label for="tgl-rows"&gt;toggle rows&lt;/label&gt;
&lt;br&gt;&lt;br&gt;
&lt;table class="solution" border="1"&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;A1&lt;/td&gt;
            &lt;td&gt;A2&lt;/td&gt;
            &lt;td rowspan="6" class="special"&gt;Text 1&lt;br&gt;Text 2&lt;br&gt;Text 3&lt;br&gt;Text 4&lt;br&gt;Text 5&lt;br&gt;Text 6&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="hide"&gt;
            &lt;td&gt;B1&lt;/td&gt;
            &lt;td&gt;B2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;C1&lt;/td&gt;
            &lt;td&gt;C2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="rows"&gt;
            &lt;td&gt;D1&lt;/td&gt;
            &lt;td&gt;D2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="rows"&gt;
            &lt;td&gt;E1&lt;/td&gt;
            &lt;td&gt;E2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="rows"&gt;
            &lt;td&gt;F1&lt;/td&gt;
            &lt;td&gt;F2&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;h2&gt;solution 2: toggle 'display' (rowspan=3)&lt;/h2&gt;
&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;td&gt;A1&lt;/td&gt;
    &lt;td&gt;A2&lt;/td&gt;
    &lt;td rowspan="3"&gt;Text 1&lt;br&gt;Text 2&lt;br&gt;Text 3&lt;br&gt;Text 4&lt;br&gt;Text 5&lt;br&gt;Text 6&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="hide-d"&gt;
    &lt;td&gt;B1&lt;/td&gt;
    &lt;td&gt;B2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;C1&lt;/td&gt;
    &lt;td&gt;C2&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>
<p>.</p>


blocks|key|2440459|text|可以滚动表数据，查看以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2440460|​|2440461|.hide+{
++visibility:+collapse
}

body+{
++padding:+2rem;
}

.table-data+{
++overflow-y:+auto;
}
.table-data::-webkit-scrollbar+{
++++display:+none;
}|code-block|syntax|javascript|2440462|<table+border="1">
++<tr>
++++<td>A1</td>
++++<td>A2</td>
++++<td+rowspan="3"+class="table-data">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>|2440463|2440464|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You can scroll your table data, Look at the following code:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.hide {
  visibility: collapse
}

body {
  padding: 2rem;
}

.table-data {
  overflow-y: auto;
}
.table-data::-webkit-scrollbar {
    display: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;td&gt;A1&lt;/td&gt;
    &lt;td&gt;A2&lt;/td&gt;
    &lt;td rowspan="3" class="table-data"&gt;Text 1&lt;br&gt;Text 2&lt;br&gt;Text 3&lt;br&gt;Text 4&lt;br&gt;Text 5&lt;br&gt;Text 6&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="hide"&gt;
    &lt;td&gt;B1&lt;/td&gt;
    &lt;td&gt;B2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;C1&lt;/td&gt;
    &lt;td&gt;C2&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>I have built an HTML table which intermediate rows are hidden with CSS using <code>visibility:collapse</code></p>
<p>Only the first and last rows of the table are visible by default.</p>
<p>In this table, there is a column on the right that was set using rowspan. This column can contain multiple lines of text.</p>
<p>My problem is that the whole content put in this column seems to be truncated if its height is bigger than the combined height of the table rows that are displayed by default (the first one and the last one).</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.hide {
  visibility: collapse
}

body {
  padding: 2rem;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;td&gt;A1&lt;/td&gt;
    &lt;td&gt;A2&lt;/td&gt;
    &lt;td rowspan="3"&gt;Text 1&lt;br&gt;Text 2&lt;br&gt;Text 3&lt;br&gt;Text 4&lt;br&gt;Text 5&lt;br&gt;Text 6&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="hide"&gt;
    &lt;td&gt;B1&lt;/td&gt;
    &lt;td&gt;B2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;C1&lt;/td&gt;
    &lt;td&gt;C2&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>
<p>What should I change in the CSS to get all the lines of &quot;Text&quot; of the rowspan cell displayed instead of being truncated? <strong>JavaScript cannot be used.</strong></p>


Table TD (rowspan) content hidden with TR visibility set to "collapse"

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我已经构建了一个使用CSS使用visibility:collapse隐藏中间行的HTML表。默认情况下，只有表的第一行和最后一行是可见的。在此表中，右边有一列是使用行跨度设置的。此列可以包含多行文本。我的问题是，如果该列的高度大于默认显示的表行的合并高度(第一个和最后一个)，则该列中的整个内容似乎被截断。​.hide ...

问表TD (行跨度)隐藏的内容，TR可见性设置为“折叠”
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表TD (行跨度)隐藏的内容，TR可见性设置为“折叠”EN