I'm building a Query Builder page. For the Look and Feel, I'd like to have a table on the left side neighbored by a box to its right of equal height and width. When fields from the lefthand table are selected new tables (according to the fields) are dynamically added in the box. I currently have the setup as: the righthand box is a table with its tbody set scrollable using overflow:auto in css. The tables that are added have their tbody[s' set scrollable too. Their height is configured to not exceed a certain amount so that the box won't scroll vertically.
The css is as follows:
/* queryBuilder.css */
/* entire queryBuilderTable */
/* table body that holds all indv tables */
/* tableChooserTable's fields. */
/* Individual table name. */
/* Individual table's fields. */
The box is defined with tbody.allTablesHolder and the tables are defined with tbody.indvTable.
My problem is that is doesn't work right. Although I set the width of the box, it never registers, and when the width is exceeded(when enough tables are added) it doesn't scroll, but rather expands the whole page. The individual tables scroll features don't register at all (their set witdh and height). They had registered before in the past (randomly) and when they did, the height scrolled properly, but the width did too slightly, no matter large aI allowed the width to be.
I'm sure all these problems are due to me adding certain style elements that shouldn't be configured as they are. If anyone can spot the errors or knows of changes to make to the GUI setup that keep my initial goals, please let me know.