跨度行的溢出，其中一行已折叠

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");
    $("td").toggleClass("maxwidth");
  });
});

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

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: 250px;
  overflow: scroll;
}

/* span {
  position: absolute;
} */

span{
  overflow: scroll;
}

.maxwidth{
  max-width: 100em;
}

<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">Very long sentence</td>
        
      </tr>
      
      <tr class="row2">
  
        <td>2</td>
        
      </tr>

      <tr>
        
        <td>1</td>
        
        <td rowspan="2"><span>Very long sentences</span></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>
      
      <tr>
        
        <td>1</td>
        
        <td rowspan="2">Very long sentence</td>
        
      </tr>
      
      <tr class="row2">
        
        <td>2</td>
        
      </tr>
      
    </tbody>
    
  </table>
  
</div>

这是您要寻找的Codepen Link

如果没有，请在评论中告诉我更多

注意：在应用可见性：折叠

后，单击滚动窗口上方的更改按钮以查看表中的更改。