Edit:I replicated this problem to http://jsbin.com/eyitij/4/editI have a strange problem with table + td width. I have code similar to this:\[code\]<table class="mainLayout" style="width: 100%;"> <tr> <td style="width: 250px;"> <div id="leftNavigationPanel"> * content * </div> </td> <td id="panelCell"> <div class="panel"> <table id="bigTable" width="100%"> * LOTS OF CONTENT, includes big table * </table> </div> </td> <tr></table>\[/code\]When I run this code on browsers, mainLayout is getting overflowed, so it becomes 3600px, and this happens because of big table inside Panel.Big table I'm referring to can be contained within screen. When done so, it gets horizontal scrollbar (which is what I want). This works if big-table is loaded in separate html-file with rule "width: 100%".After adding mainLayout a rule "display: block;", mainLayout table is rendered ~1800px and is contained within screen, but problem is that "panelCell"-TD is still ~3400px wide, so I'm still having whole page scrolling... TD isn't contained within table, but always expands to 250px + bigTable.width() !? Basically browser doesn't know how to calculate "panelCell" to fill only : window.width - leftNavigationPanel.Any ideas how to make right rules without using javascript + precalculated max-width rule for "panelCell"?
- panelCell must be contained within window
- bigTable must be contained within panelCell, with scrollbar