I want to build a table that has fixed width columns. The table data will in most cases overflow both horizontally and vertically.
If the width of the columns is greater that the view width, an horizontal scrollbar is needed to scroll and see all table columns, scrolling both header and data.
If the height of data is greater than the available view, than a vertical scroll box appears, but on scrolling keeping the header fixed so that the user keep an eye on columns.
It is an Microsoft Excel like behaviour (just for reading). Something like:
I've seen several posts, but they only solve either the horizontal scroll or the vertical scroll. I need a solution that will work on both conditions on the same time.
Here is a FIDDLE I'm trying to make work, but even a simple horizontall scroll using overflow-x: auto is not working.
Help appreacited. I need a plain HTML + CSS to embed in a ReactJS component.
Obviously, this would need a little tweaking to get it perfect, but I am assuming that you are not leaving all those bright red borders, etc. anyway. I took the liberty to make the columns larger (force-width to 400px) to better demonstrate the effect.
Essentially, there is a position:absolute; that has it's top forced on scroll to equal the scrollTop of the parent div.
http://jsfiddle.net/d13d2fab/3/
document.querySelector('.ux-data-table').onscroll = function (e) { // called when the window is 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 the header from overflowing the 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>
