Grid header and content TABLE elements have different "display" value, which causes misalignment on horizontal scrolling

[kdikov82]

In the following example, which has 800 columns, scrolling horizontally will start introducing misalignment between the header and the data cells:

• https://stackblitz.com/edit/react-u6s5vf-qg2nzj?file=app%2Fmain.jsx,index.html

The problem is due to the fact that the data table is with "display: block" and the header table is "display: table". For some reason, even with explicit width and the same width columns, etc., the width of the header table is with different width and those few pixels breaks the alignment.

Setting the "display: block" to the header table or setting "display: table!important" to the data table resolves the issue:

            <style>
            .k-grid-header-wrap table{ 
                display: block;
            } 

or

 .k-grid-table{
                display: table!important;
            }

https://stackblitz.com/edit/react-u6s5vf-tecr1e?file=app%2Fmain.jsx,index.html

[kdikov82]

The different "display" for both tables causes horizontal scrolling issue in Safari as well: https://stackblitz.com/edit/react-k3y3cj?file=index.html