跨行溢出，一行折叠

Question

我想让溢出的行在跨越的行内工作，另一个被折叠。

现在文本已被剪裁，但当行未折叠时 - 溢出有效。 我试过position: absolute，它可以工作......直到你开始滚动。如果我开始将position: relative 放在任何地方，文本就会再次被剪裁。

我搜索了任何提示，但我发现这显然是 Webkit 实现它的方式：https://github.com/w3c/csswg-drafts/issues/478#issuecomment-318539983 在 Firefox 上没有问题，只有在 Webkit 浏览器上。

table {
  border-collapse: collapse;
  border: 1px solid black;
}

tr {
  height: 20px;
  positon: relative;
}

td {
  max-width: 100px;
  height: 20px;
  vertical-align: top;
  white-space: nowrap;
  border: 1px solid black;
}

.collapsed {
  visibility: collapse;
}

div {
  height: 300px;
  overflow: scroll;
}

/* span {
  position: absolute;
} */

<div>
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td rowspan="2">Very long sentence</td>
      </tr>
      <tr class="row2"><td>2</td></tr>

      <tr>
        <td>1</td>
        <td rowspan="2"><span>Very long sentence</span></td>
      </tr>
      <tr class="row2 collapsed"><td>2</td></tr>

      <tr>
        <td>1</td>
        <td rowspan="2">Very long sentence</td>
      </tr>
      <tr class="row2"><td>2</td></tr>
      
      <tr>
        <td>1</td>
        <td rowspan="2">Very long sentence</td>
      </tr>
      <tr class="row2"><td>2</td></tr>
      
      <tr>
        <td>1</td>
        <td rowspan="2">Very long sentence</td>
      </tr>
      <tr class="row2"><td>2</td></tr>
      
      <tr>
        <td>1</td>
        <td rowspan="2">Very long sentence</td>
      </tr>
      <tr class="row2"><td>2</td></tr>
      
      <tr>
        <td>1</td>
        <td rowspan="2">Very long sentence</td>
      </tr>
      <tr class="row2"><td>2</td></tr>
      
      <tr>
        <td>1</td>
        <td rowspan="2">Very long sentence</td>
      </tr>
      <tr class="row2"><td>2</td></tr>
      
      <tr>
        <td>1</td>
        <td rowspan="2">Very long sentence</td>
      </tr>
      <tr class="row2"><td>2</td></tr>
      <tr>
        <td>1</td>
        <td rowspan="2">Very long sentence</td>
      </tr>
      <tr class="row2"><td>2</td></tr>
      
      <tr>
        <td>1</td>
        <td rowspan="2">Very long sentence</td>
      </tr>
      <tr class="row2"><td>2</td></tr>
    </tbody>
  </table>
</div>

Answer 1

$(document).ready(function(){
  
  $("#change").click(function(){
    
    $(".row2").toggleClass("collapsed");
    
    // $(".spannedtd").removeAttr("rowspan");
    
    $('.spannedtd').attr('rowspan', function(index, attr){
      
        return attr == '2' ? null : '2';
      
    });
    
  });
  
});

table {
  
  border-collapse: collapse;
  
  border: 1px solid black;
  
}

/* tr{

  height: 20px;
  
  position: relative;
  
} */

td{
  
  max-width: 100px;
  
/*   height: 20px; */
  
  vertical-align: top;
  
  white-space: nowrap;
  
  border: 1px solid black;
  
}

.collapsed {
  
  visibility: collapse;
  
}

div{
  
  height: 300px;
  
  overflow: scroll;
  
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="change" class="btn btn-primary">Change Visibility</button>

<br/>

<br/>

<div>

  <table>

    <tbody>

      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>

 <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>
      
      <tr>

        <td>1</td>

        <td rowspan="2" class="spannedtd"><span>Data Data Data Data</span></td>

      </tr>

      <tr class="row2">

        <td>2</td>

      </tr>

    </tbody>

  </table>

</div>

以上代码Codepen Link

我已删除按钮单击时的行跨度。

注意：在应用visibility:collapse

后，点击滚动窗口上方的更改按钮可查看表格的更改