Fizzix Fizzix - 1 month ago 6
CSS Question

How to create a table with a fixed column at the start and end?

So basically, I am trying to create a table with a fixed column at the start, and the end.

This is the layout:

Fixed | Header 1 | Header 2 | Header 3 | Fixed |
Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |


So as the above example displays, the very first column and very last column needs to be fixed (always visible). The in-between must be scrollable (overflow-x: scroll), although I am not to sure how to approach this.

I have come up with this, which only makes the first column fixed. Although, it is not a reliable solution since it is messing up the layout on my page due to the
margin-left: -100px
.

DEMO

Answer

I dunno about old-ie, but this will work in modern browsers:

.last-td {
    position:absolute;
    right:0;
    width:100px;
}
.container {
    display: inline-block;
}
.wrapper {
    margin-right: 120px;
}

Give the all the last <td>s class="last-td". Or you could use td:last-child.

http://jsfiddle.net/s2dGX/