Suppose you have a table measuring 82x82, but you only want to display the central 80x80 section of the table while still retaining the data in the hidden cells. One solution could be enclosing the table within a div element that hides the unnecessary parts of the table. This can be achieved as follows:
#workspace {
position: absolute;
width: 800px;
height: 800px;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -400px;
overflow: hidden;
}
table {
position: absolute;
margin-left: -10px;
margin-top: -10px;
width: 820px;
height: 820px;
}<div id="workspace">
<table>
</table>
</div>Upon inspecting the console in Mozilla, you might notice a glimpse of the hidden cells at the bottom of the table. You can view this issue here: https://i.sstatic.net/9jMlY.png
Hence, the query arises as to how one can rectify this problem or suggest alternative methods to conceal the superfluous sections of the table.
P.S. The table cells are dynamically generated using JavaScript.