Here's a typical example:
<div> My first line<br /> My second line<br /> <table style="border:1px solid black;background-color:#99aabb;"> <tr><td>LongExampleTextSuchAsPaths</td> <td>LongExampleTextSuchAsPaths</td> <td>LongExampleTextSuchAsPaths</td> <td>LongExampleTextSuchAsPaths</td> <td>LongExampleTextSuchAsPaths</td> <td>LongExampleTextSuchAsPaths</td> </tr></table> </div> After the tableIn this situation, the div layer's width is set by it's parent, and the table is set by it's parent/set width or it's minimum content width, whichever is larger. since the table's width is more then the div width, it breaks out of it's parent, creating an odd-looking effect.
By contrast, a table has quirks of it's own (especially the inablility to effectively use margins cross-browser), but in this instance, the parent table notices that it's child width is wider then it's parent/set width, and resizes appropriately to expand past the page and encompass it's child.
<table style="margin-top:20px;margin-bottom:20px;width:100%;"> <tr><td style="width:20px;background-color:#ffffff;"> </td> <td style="background-color:#99bb99;"> My first line<br /> My second line<br /> <table style="border:1px solid black;background-color:#99aabb;"><tr> <td>LongExampleTextSuchAsPaths</td> <td>LongExampleTextSuchAsPaths</td> <td>LongExampleTextSuchAsPaths</td> <td>LongExampleTextSuchAsPaths</td> <td>LongExampleTextSuchAsPaths</td> <td>LongExampleTextSuchAsPaths</td> </tr></table> After the table </td> <td style="width:20px;background-color:#ffffff;"> </td> </tr></table>
in table less-designs, (especially fixed-width) I love div layers. (Facebook uses them - just look at the source) They easily are customizable and well organized. However, when large tables are needed to display content, a parent table, although uglier and harder to control, might be a better bet.
As an alternative school of thought, another option is to make a div contain the parent with overflow-x set to scroll. This will put a scroll bar at the bottom of the table, and either by using the scroll bar at the bottom of the table or javascript on the sides, will allow scrolling inside the div layer. To me, however, in the instances I've had to put a data table in a formatted page, it has seemed more intuitive to make the browser do the scrolling piece (especially in variable-width instances.)
Thirdly, one could scrap the layout entirely, and just go with the datatable by itself. Probably smarter, but not as friendly with ajax switching back and forth.
