How to fix position of table while scrolling vertically. fix position at y-axis but scroll-able at x-axis

Question

I need to fix the position of table used as a header while scrolling. I was trying to achieving the functionality of data table to be scrolled horizontally and vertically while it's data cells width remains constant. Now the issue is whenever I try to fix the position of table that I used for header it's not scrolling with horizontal scroll. I just want to fix the top header table while scrolling vertically but it should scroll horizontally.

This is the css I have used for it

table {
    line-height: 3;
    border-collapse: collapse;
    min-width: 100%;
    display: block;
}

table td span {
    white-space: normal;
    line-height: 1.2;
}

table th,
table td {
    padding: 0 10px !important;
    line-height: 1.2;
    min-width: 175px;
    max-width: 175px;
}

#table1 th:first-child {
    padding-left: 5px;
}

table th {
    background: #f9f9f9;
}

table .table-frame {
    height: 300px;
    overflow-y: scroll;
}

.scroll-table-holder {
    overflow-x: auto;
    white-space: nowrap;
    max-height: calc(100vh - 350px);
}

.text-left{
  text-align: left;
}

Here's the plunker with complete html and css. On this plunker it just need the table used for header to be fixed at top while scrolling vertically

user_164398 · Answer

I'm working on solving a similar issue for a datagrid component. I used flexbox to layout the headers and cells (as rows) and then wrapped things in scrollable panes for the desired access.

Check out this codepen to see it working. fyi - the codepen is actually trying to solve a different problem but it might give you some ideas for using flexbox for the layout and panes for the scrollable content.

SCSS

body {
    padding: 25px;
}

p {
    margin: 12px 0;
}

.datagrid-host {
    border: 1px solid;

    .datagrid-action-overflow {
        border-bottom: 1px solid;
    }

    .datagrid-viewport {
        display: flex;
        flex-direction: row;
        .datagrid-pinned-data {
            flex: 0 0 auto;
            width: 250px;
            border-right: 1px solid;
            display: flex;
            // display: none;
            flex-direction: column;
            height: 200px;
            .pinned-header {
                flex: 0 0 auto;
                background-color: #dcdcdc;
            }
            .pinned-data {
                flex: 1 1 auto;
                &.y-scrollable-pane {
                    flex: 1 1 auto;
                    position: relative;/* need this to position inner content */
                    overflow-y: auto;
                }
            }
        }

        .x-scrollable-pane {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            height: 200px; // sets the height of the datagrid
            overflow-x: auto;

            .datagrid-column-header {
                flex: 0 0 auto;
                background-color: #dcdcdc;
                width: 1900px; // must be same width as .page-content
            }

            .y-scrollable-pane {
                flex: 1 1 auto;
                position: relative;/* need this to position inner content */
                overflow-y: auto;
                width: 1900px; // must be same width as .page-header
            }
        }
    }

    .datagrid-footer {
        border-top: 1px solid;
    }
}

.datagrid-row {
    display: flex;

    .datagrid-cell {
        width: 10%;
    }
}

HTML

How to fix position of table while scrolling vertically. fix position at y-axis but scroll-able at x-axis

2 Answers