css - Excel like HTML table scrollable on x-axis (full table) and y-axis (header fixed) -
i want build table has fixed width columns. table data in cases overflow both horizontally , vertically.
if width of columns greater view width, horizontal scrollbar needed scroll , see table columns, scrolling both header , data.
if height of data greater available view, vertical scroll box appears, on scrolling keeping header fixed user keep eye on columns.
it microsoft excel behaviour (just reading). like:
i've seen several posts, solve either horizontal scroll or vertical scroll. need solution work on both conditions on same time.
here fiddle i'm trying make work, simple horizontall scroll using overflow-x: auto not working.
help appreacited. need plain html + css embed in reactjs component.
obviously, need little tweaking perfect, assuming not leaving bright red borders, etc. anyway. took liberty make columns larger (force-width 400px) better demonstrate effect.
essentially, there position:absolute; has it's top forced on scroll equal scrolltop of parent div.
http://jsfiddle.net/d13d2fab/3/
document.queryselector('.ux-data-table').onscroll = function (e) { // called when window scrolled. var topofdiv = math.max(document.queryselector(".ux-data-table").scrolltop - 2, 0); document.getelementsbytagname('thead')[0].style = "top:" + topofdiv + "px;"; }.ux-data-table { width: 100%; height: 200px; overflow: auto; } /* prevents header overflowing scrollbars */ .ux-data-table-inner { position: relative; } .ux-data-table table { width: 100%; } .ux-data-table table, .ux-data-table th, .ux-data-table td { background-color: red; color: white; border: 1px solid black; width: 400px; min-width: 400px; } .ux-data-table thead { position: absolute; } .ux-data-table tbody { margin-top: 20px; display:block; } .ux-data-table td { background-color: white; color: red; border: 1px solid black; }<div class='ux-data-table'> <div class='ux-data-table-inner'> <table> <thead> <tr> <th>#</th> <th>col 1</th> <th>col 2</th> <th>col 3</th> <th>col 4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>item 1</td> <td>cd player</td> <td>used</td> <td>sony</td> </tr> <tr> <td>2</td> <td>item 2</td> <td>variscope</td> <td>used</td> <td>general</td> </tr> <tr> <td>3</td> <td>item 3</td> <td>microphone</td> <td>new</td> <td>mastersound</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> <tr> <td>4</td> <td>item 4</td> <td>cable</td> <td>new</td> <td>techable</td> </tr> </tbody> </table> </div> </div>
Comments
Post a Comment