Bodo Bodo - 24 days ago 18
CSS Question

Margin-left on table based on screen width, with scrollbar

I've got a sticky table column with employee names on the left side of my screen. And a large table with a scrollbar next to it.

The idea is when im scroling to the right to see the content of the large table that my sticky table column with names pushes the table to the right.

In that way I've got a nice overview of the names on the left side of the screen, and it's not overlapping my table.

Can't seem to get it to work properly, does anybody have some suggestions?

enter image description here

Answer

If you want to achieve effect like Excel fixed column:

Do like this:

.table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
    width:250px;
    margin-left: 120px;
}

td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child {
    position: fixed;
    left: 5px
}

Working Demo

Comments