Search code examples
javascripthtmlcssreactjshtml-table

Table lags at 100% width

I have a table with a large number of elements, I want the table to stretch to the full width of the screen. The problem is that when it stretches, it starts to slow down terribly. enter image description here however, if you set the table to a fixed width or reduce it to the width of the appearance of the bottom scroll, then everything works correctly and there are no lags enter image description here tell me how it can be optimized? maybe it's wrong that I use table tag ?

Solution

  • Maybe a workaround could be to use javascript to trigger the table resize after a delay.

    Adding css transition to make it look smooth.

    Example:

    let delayedResize = null;
window.onresize = (event) => {
    setTableWidth();
};
setTableWidth();
function setTableWidth(){
    clearTimeout(delayedResize);
    delayedResize = setTimeout(() => {
        document.querySelector('table').style.width = window.innerWidth + "px";
    }, 100);
}
    html,body{
    margin:0;
    overflow:hidden
}
table {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 0.4s;
}
    <table>
    <td>test</td>
    <td>test</td>
</table>