JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<table></table>
</div>
<button style="font-size:1.3em">Remove Overflow rows</button>
CSS
html, body, #container {
height:100%;
margin:0;
padding:0
}
#container {
overflow:auto;
width:50%;
float:right
}
td {
border:1px solid #ccc
}
table {
border-collapse:collapse
}
JavaScript
$('button').click(function () {
var $cont = $('#container')
var contBottom = $cont.height() + $cont.offset().top;
$('tr').filter(function () {
var $row = $(this),
top = $row.offset().top,
ht = $row.height();
console.log(top + ht)
return (top + ht) > contBottom;
}).remove()
})
// DEMO SETUP
function createRows() {
for (var i = 0; i < 200; i++) {
var $row = $('<tr>')
for (var j = 0; j < 3; j++) {
$row.append($('<td>').text('Item ' + i + '-' + j))
}
$('table').append($row)
}
}
createRows();