My HTML table is set up with an overflow property to ensure it doesn't exceed a specific height, but the following div is not being positioned directly below the scrolling table as intended.
Even though I am using overflow: hidden, I can still select the text, although it's not visible.
$('document').ready(function() {
var $table = $('#ingsNeededTable'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
$(window).resize(function() {
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i] + 1);
});
}).resize();
var loop = setInterval(function() {
$("#ingsNeededTable tbody").animate({scrollTop: $("#ingsNeededTable tbody").prop("scrollHeight")}, 100000, "linear");
$("#ingsNeededTable tbody").animate({scrollTop: 0}, 100000, "linear");
}, 1);
});#ingsNeededTableHolder {
height: 45%;
}
#ingsNeededTitle, #ingsRecentTitle {
text-align: center;
}
#ingsNeededTable {
border-collapse: collapse;
width: 100%;
}
#ingsNeededTable th, #ingsNeededTable td {
border-bottom: 1px solid black;
}
#ingsNeededTable thead {
display: block;
width: 100%;
}
#ingsNeededTable tbody {
display: block;
height: 40%;
overflow-y: hidden;
width: 100%;
}
.ingsNeededTableIng, .ingsNeededTableProd {
width: 40%;
}
.ingsNeededTableNeeded {
width: 10%
}
#ingsNeededTable tr:nth-child(even) {
background-color: #eaf2f1
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id='ingsNeededTableHolder'>
<table id='ingsNeededTable'>
<thead>
<tr>
<th class='ingsNeededTableIng'>Ingredient</th>
<th class='ingsNeededTableNeeded'>Needed (Kg)</th>
<th class='ingsNeededTableProd'>Product</th>
</tr>
</thead>
<tbody>
// additional rows of table data...
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2>This Should Be Below The Scrolling Table</h2>
</div>The table alignment appears correct on my webpage, but not in the snippet provided for some reason.