Переполнение в натянутом ряду с одним свернутым рядом

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

Я удалил строку строки при нажатии кнопки.

ПРИМЕЧАНИЕ : Нажмите кнопку изменения над окном прокрутки, чтобы увидеть изменения в таблице после применения видимость: свертка