Table sticky columns scroll bug Chrome

Question

I created a table, where there are a couple of fixed columns, and the rest are scrolling. This is done using a wrapper div and setting position absolute and a negative left margin on the fixed columns.

It's part of a complex datatable so it's hard for me to recreate in jsfiddle, but here's a link: http://rateshopper.error404.ro/table.html

The problem is when you just play around with the scrolling and then move the cursor left. The fixed columns sometime just jump out of position. Unchecking and rechecking margin left in the inspector fixes it. I don't know why it happens.

Here's a video in Chrome: http://rateshopper.error404.ro/bug_chrome.mov

Any ideas or help would be greatly appreciated!

Answer 1

Edit:

Better fix:

.col-lg-10 {
    float: right;
}

Setting a float on the parent element of #seriesTableWrapper prevents a margin collapse from occuring on it's children.

Here's a must read on margin collapsing: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

The article is a bit outdated in terms of methods to prevent margin collapsing but it explains why and how it happens well.

More modern ways to prevent margin collapsing: How to disable margin-collapsing?

---

Found a fix

Change:

#seriesTableWrapper {
    margin-left: *something*;
}

to:

#seriesTableWrapper {
    padding-left: *something*;
}

Probably a margin collapse issue, margins might collapse in some cases. Sadly the scrollbar extends now over the full width.

Since there is no vertical scroll you could just have made a table without scrolling and a table with horizontal scrolling next to it. And if there is vertical scrolling you could wrap both these tables in a div with overflow: auto;

Answer 2

I was able to reproduce the appearance you show above by wildly resizing the window. I suspect that during resizing whatever you're using to set your initial left margin is returning null. Setting a minimum value for the left margin would likely solve this issue. If you can provide the javascript that calculates and applies those positions I will happily aid you in editing it.