CSS - how to make table header scroll only vertically

Asked Apr 03 '17 at 09:59

Active Mar 28 '18 at 06:01

Viewed 39 times

I need to do a table like that the table need to have a hard-coded height like on fiddle. The problem is i want to make a left column to be static. I mean, it need to be static when scrolling horizontal but should scroll down when scrolling verticali div. I have something like that (fiddle) but the headcolum stay out of the div. Somebody know how can i fix it. I need to do this without Js or JQ. cheers :)

table { border-collapse:separate; border-spacing:0;border-top: 1px solid grey; }
    td, th {
        margin:0;
        border:1px solid grey;
        white-space:nowrap;
        border-top-width:0px;
    }
    div {
        width: 500px;
        height:500px;
        overflow-x:scroll;  
        margin-left:5em;
        overflow-y:visible;
        padding:0;
    }
    .headcol {
        position:absolute;
        width:5em;
        left:0;
        top:auto;
        border-top-width:1px; /*only relevant for first row*/
        margin-top:-1px; /*compensate for top border*/
    }
    .headcol:before {content: 'Row ';}
    .long { background:yellow; letter-spacing:1em; }

Full fiddle here

edited Mar 28 '18 at 06:01

Cœur

37,241
25
195
267

asked Apr 03 '17 at 09:59

Przemysław Zamorski

Go through : http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody – Safvan CK Apr 03 '17 at 10:03
I look but i edit. They was a mistake i meant left column not a headcolumn – Przemysław Zamorski Apr 03 '17 at 10:09
You can't fix the first left column without js. – 3rdthemagical Apr 03 '17 at 12:51

CSS - how to make table header scroll only vertically

0 Answers0