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

EN

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

/* 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 + 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 }

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

.hide {
  position: absolute;
  left: -999em;
}

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>