Bug 81216 – Table column position is distorted with table-layout fixed when tr is hidden and then shown again

• Component: Tables
• Status: UNCONFIRMED

[Robert Plummer]

The jsfiddle isn't as friendly to reproduce this issue, but it can easily be reproduced.  It may be better to do it using the svn: https://jquerysheet.googlecode.com/svn/trunk/ and then use arrow keys, .  The issue is this: When a row/column is hidden (ie when row 2 is not visible because you've scrolled down to row 15) and not all the td's are displayed (ie there are columns that need to be scrolled to to see all of them) often times the td object is displaced when the tr object is changed to show.  Cell A1 will be in the position of cell B1.  It only seems to be 1 column displacement, I've never seen more than that.  But this is a webkit bug because other browsers show this just fine, and it is reproducible in chrome 17.0.963.79.  Please don't discount this bug, this is a serious table rendering bug and has big consequences with the table object.

To reproduce from svn:
Click cell A2, press right key 5 times, which should navigate to cell F2.
Now press left key 6 times.
Notice that now Cell B1 now in the place of where cell B2 should be, and every cell in that row is shifted over.

More info on why this method is used in contrast with actual scrolling:
Scrolling the spreadsheet requires that you detach the cell id bars (the bars that say for column "A", "B", or "C" and for rows "1", "2", or "3") the bars then need to be scrolled to match the position of the cells (or the table object).  Because of the differences in how browsers understand the width/height of a td object, the bars never perfectly line up in all browsers.  The answer was to ensure that they are all connected via the table object, remove scrolling altogether, and then recreate a sort of sudo scrolling (hiding/showing rows/columns) which works very nice in all browsers except ie 7 and chrome due to the above issues with rendering tables.  A method was used for a short amount of time that tried to "redraw" the table (which would just hide the tr object, and then show it after a timeout of 0001) which works in some cases, but not all.  I am a developer myself, c#, php, javascript, mysql, t-sql, and can try to assist in ensuring this problem gets taken care of.  Thank you so much for you help and time.

More info on what is happening in the sheet plugin:
Columns are "hidden" by finding the width of the col object you want to hide, making its width 0, and then subtracting the hidden column width from the table object, then adding the width value to the Column's data-width attribute.
Columns are shown by taking the data-width attribute of the "hidden" col object, setting the column with from that value, and adding that value to the table object's width.
Rows are "hidden" by simply adding the class "rowHidden" (display: none; opacity:0.01; filter:alpha(opacity=01);) to the tr object, which applies the value in parenthases to the tr and the tr's td objects.
Rows are shown by removing the class "rowHidden".

[Robert Plummer]

Created attachment 132043 [details]
This is the latest svn of jQuery.sheet, which is where the bug is easily reproducable.