Aligning Tables Within a Div Table

[defiant91]

I have replaced a table containing four tables (in a grid) with a div-table containing the four tables as cells. Two things that I absolutely can't seem to get to work are:1) How do I get rid of the table border of the div tag using "display: table"?2) The bottom left table insists on lining up with the far left edge of the cell and I want it to line up with the far right edge of the cell. Even relative positioning is having no impact on this one.Here is the CSS:\[code\]<style type="text/css"> .Dashboard { display: table; border-collapse: collapse; border-width: 0px; } .row1 { display:table-row; } .row2 { display:table-row; height: 200px; } .cell1 { display: table-cell; padding: 2px; border: 1px solid black; } .cell2 { display: table-cell; padding: 2px; border: 1px solid black; } .cell3 { display: table-cell; padding: 2px; border: 1px solid black; text-align: right; vertical-align: top; } .cell4 { display: table-cell; padding: 2px; border: 1px solid black; } table.inner { border-collapse: collapse; border: 2px solid black; text-align: center; padding: 2px; } td { border-collapse: collapse; border: 2px solid black; text-align: center; padding: 2px; } td.image { padding: 0; margin: 0; }</style>\[/code\]And the table layout looks like this:\[code\]<div runat="server" id="Dashboard" class="Dashboard"> <div class="row1"> <div class="cell1"> <table class="inner" id="t1"> <tr>...</tr> ... <tr>...</tr> </table> </div> <div class="cell2"> <table class="inner" id="t2"> <tr>...</tr> ... <tr>...</tr> </table> </div> </div> <div class="row2"> <div class="cell3"> <table class="inner" id="t3"> <tr>...</tr> ... <tr>...</tr> </table> </div> <div class="cell4"> <table class="inner" id="t4"> <tr>...</tr> ... <tr>...</tr> </table> </div> </div></div>\[/code\]Any advice is appreciated.Regards.