“First off, let me take this opportunity to thank you for providing the 'Lock Table Column' on your website. I NEVER would have thought to use CSS in this way to solve this problem and I'm sure there are plenty of people out there that appreciate you sharing your expertise with us. That said, I've run into an unexpected behavior using your approach that I was hoping you could help me out with or at least explain...”
The problem cited is that cell borders do not collapse as they should between multiple locked columns. This gives inner borders a bit more emphasis than the border next to the cells that scroll.
I never approach an IE problem with the hope of actually explaining that browser's behavior. That way lies madness. Keep psychic scars to a minimum by taming the beast not with logic but with trickery, smoke, and mirrors.
The solution is to eliminate the left border of the locked cells, then fake a left border of the "table" by styling the left border of the containing DIV. One final aesthetic tweak is provided by offsetting the locked columns 1px to prevent the true table border and DIV border combining in the initial state.
Note: IE5.0 breaks completely and inappropriately when faced with white-space: nowrap. If IE5.0 must be supported, style column widths with the col tag.
| Row Header 1 | Row Header 2 | Row 1 cell 3 | Row 1 cell 4 | Row 1 cell 5 | Row 1 cell 6 | Row 1 cell 7 | Row 1 cell 8 | Row 1 cell 9 | Row 1 cell 10 | Row 1 cell 11 | Row 1 cell 12 |
| Row Header 1 | Row Header 2 | Row 2 cell 3 | Row 2 cell 4 | Row 2 cell 5 | Row 2 cell 6 | Row 2 cell 7 | Row 2 cell 8 | Row 2 cell 9 | Row 2 cell 10 | Row 2 cell 11 | Row 2 cell 12 |
| Row Header 1 | Row Header 2 | Row 3 cell 3 | Row 3 cell 4 | Row 3 cell 5 | Row 3 cell 6 | Row 3 cell 7 | Row 3 cell 8 | Row 3 cell 9 | Row 3 cell 10 | Row 3 cell 11 | Row 3 cell 12 |
| Row Header 1 | Row Header 2 | Row 4 cell 3 | Row 4 cell 4 | Row 4 cell 5 | Row 4 cell 6 | Row 4 cell 7 | Row 4 cell 8 | Row 4 cell 9 | Row 4 cell 10 | Row 4 cell 11 | Row 4 cell 12 |
| Row Header 1 | Row Header 2 | Row 5 cell 3 | Row 5 cell 4 | Row 5 cell 5 | Row 5 cell 6 | Row 5 cell 7 | Row 5 cell 8 | Row 5 cell 9 | Row 5 cell 10 | Row 5 cell 11 | Row 5 cell 12 |
| Row Header 1 | Row Header 2 | Row 6 cell 3 | Row 6 cell 4 | Row 6 cell 5 | Row 6 cell 6 | Row 6 cell 7 | Row 6 cell 8 | Row 6 cell 9 | Row 6 cell 10 | Row 6 cell 11 | Row 6 cell 12 |
| Row Header 1 | Row Header 2 | Row 7 cell 3 | Row 7 cell 4 | Row 7 cell 5 | Row 7 cell 6 | Row 7 cell 7 | Row 7 cell 8 | Row 7 cell 9 | Row 7 cell 10 | Row 7 cell 11 | Row 7 cell 12 |