1

I have a table (with a scroll bar) nested inside another table. Outer table has no scroll bar.

Outer table's width is set to 100% of the browser's client area width. There is a minimum width to the table, but we need not get into that, because it doesn't contribute to the issue at hand.

The column widths of both table are percentages to make them dynamically re-sizable when browser width is changed.

Because the native scroll bar width is 17px (google search), the inner table table's columns become understandably misaligned progressively shifted more and more to the left as one pans to the right.

I have 8 columns visible initially. There are 72 more hidden columns to the right. I use jquery to hide and show different sets of columns, 12 at a time. But only the initial display has 8 columns.

I can't just give different/smaller column width percentage to the inner table because the scroll bar does not re-size itself dynamically along with the table when the browser is re-sized.

I tried to assign widths of the inner table with the CSS calc() function; example calc((100% + 17px) * 10.5%) for all columns except the rightmost one. That one will bear the brunt of the scroll bar (that is OK).

  • 100% is the width of the inner table, of course; which in turn is 100% of the outer table

  • 17px is the width of the native scroll bar

  • 10.5% is the width of the columns of the outer table

But this gives me very large first column width, while the rest are squeezed together.

I tried different formulas with calc() to no avail...as in, different and varied results, but still misaligned.

I need to mention that re-adjusting the column widths dynamically with jquery/javascript proved to be slow and unusable, due to the number of columns involved.

Here is what I would like to have:

col 1   | col 2   | col 3   | col 4   | col 5   | col 6   | col 7   | col 8    |
--------------------------------------------------------------------------------
value1  | value2  | value3  | value4  | value5  | value6  | value7  | value8   |
...     |...      |...      |...      |...      |...      |...      |...       |
--------------------------------------------------------------------------------
value   |value    |value    |value    |value    |value    |value    |value   |↑|
...     |...      |...      |...      |...      |...      |...      |...     |⁞|
...     |...      |...      |...      |...      |...      |...      |...     |⁞|
...     |...      |...      |...      |...      |...      |...      |...     |↓|
--------------------------------------------------------------------------------
...     |...      |...      |...      |...      |...      |...      |...       |
...     |...      |...      |...      |...      |...      |...      |...       |
...     |...      |...      |...      |...      |...      |...      |...       |

The section in the middle is the inner table (with a scroll bar)

But here is what I get:

col 1   | col 2   | col 3   | col 4   | col 5   | col 6   | col 7   | col 8    |
--------------------------------------------------------------------------------
value1  | value2  | value3  | value4  | value5  | value6  | value7  | value8   |
...     |...      |...      |...      |...      |...      |...      |...       |
--------------------------------------------------------------------------------
value  |value   |value   |value   |value   |value   |value   |value          |↑|
...    |...     |...     |...     |...     |...     |...     |...            |⁞|
...    |...     |...     |...     |...     |...     |...     |...            |⁞|
...    |...     |...     |...     |...     |...     |...     |...            |↓|
--------------------------------------------------------------------------------
...     |...      |...      |...      |...      |...      |...      |...       |
...     |...      |...      |...      |...      |...      |...      |...       |
...     |...      |...      |...      |...      |...      |...      |...       |

The simulation is not exact, but you get the drift. The columns widths of the inner table are equal to each other, but the simulation, like I said, is a bit off.

shakyjake
  • 123
  • 1
  • 9
  • Can you provide markup and CSS of what you've done so far? – Chris Yongchu Aug 28 '15 at 18:10
  • The markup is straight forward, a table within a of another table. No complicated stuff: – shakyjake Aug 28 '15 at 18:16
  • I am sorry Chris. SO made my comment edit time expire. I will try a fresh comment. – shakyjake Aug 28 '15 at 18:38
  • The markup is very simple. A table within a of another table. No complexity here. The css is also extremely simple td {width: 10.5%;}...#innerTable {overflow-y: scroll;} But like I said, I tried the CSS function calc() for the inner table s with several different formulas inside it such as calc((100% + 17px) * 10.5%) and others, to not avail....Varying the widths and cal() function is what I have tried. There is nothing else I can think off that can add useful info to this.. I wish there is, but unfortunately there isn't. – shakyjake Aug 28 '15 at 18:38
  • Don't use a nested table. It'll never work 100% and you'll burn far too much time trying to get it to work. Instead, use a scrolling `tbody`. Essentially, put the parts you don't want to scroll into `thead`/`tfooter` and the scrollable part into `tbody`. Here's an existing question that goes into more detail with answer on how to configure this in css: http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody – freedomn-m Aug 28 '15 at 20:36
  • Alternatively, put the scrollbar in a div outside the table and catch events to scroll the inner part. – freedomn-m Aug 28 '15 at 20:38
  • Alternatively again, have an extra column for the scollbar (that's empty in the other rows) (ie 9 columns in outer table), scrolling row inner table spans 8 cols has a `div` with `overflow-x:auto` and the scrolling column height is set via javascript. – freedomn-m Aug 28 '15 at 20:39
  • @freedomn-m, the thead, tbody, and tfooter suggestion seems promising. I think I'll try that in combination with the extra column in the outer table and let you know. One thing I forgot to mention was that I already tried the extra column, however, that was in combination with the inner table solution. Anyhoo, will get back with the results... – shakyjake Aug 29 '15 at 18:49
  • @freedomn-m, it worked perfectly. Unfortunately, some added requirements came down the pike Monday morning requesting provision for several scroll-able segments, not necessarily contiguous. I broke theader, tbody, and tfooter into 3 tables. Of course, adding another scroll-able segment would simply mean inserting another table. It still worked like a charm. So, thanks. And if you would put your suggestion into a proper reply, I can credit you with an answer. – shakyjake Aug 31 '15 at 15:37

0 Answers0