CODEWITHSUNDEEP
htmlcsshtml-table
Fizzix
Fizzix

Reputation: 24375

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

Upvotes: 1

Views: 237

Answers (1)

bjb568
bjb568

Reputation: 11498

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/

Upvotes: 1

Related Questions