CSS Cell Margin

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24813117.html?cid=1572#a36136547 I'm trying to design a table where some cells contain other sub-tables. I want the borders between two cells in the main table, and between two cells in a sub-table, and between a cell in the sub-table and a cell in the main table, to look exactly the same. I've almost got it working, but I can't solve one final problem. This is that the gap between the borders of a cell in the sub-table and a cell in the main table is bigger than the gap between the borders of two cells in the sub-table or the gap between the borders of two cells in the main table. I think the reason is that if you specify a cell-spacing property for a table, it allows this much space aropund the edge of the table, as well as between the cells. I need the gap around the edge of the table to be zero, even though I have a gap between the cells of the table. Can I do this? And if so will it work in most modern browsers? I know I could achieve the same effect using rowspan and colspan, but this messes up my sorting algorithm for sorting the table (using JS to manipulate the DOM). Below is my code. Attached is what it looks like in IE7. I've exaggerated the dimensions to emphasise the effect - normally the 3px measurements would be 1px

by rjurd

HTML

<h1>Table Test</h1>
<table class='outer-table' border='0'>
    <tr>
        <td>First Cell</td>
        <td class="contains-table">
            <table class="inner" border='0'>
                <tr>
                    <td>sub-table 1 row 1 cell 1</td>
                    <td>sub-table 1 row 1 cell 2</td>
                </tr>
                <tr>
                    <td>sub-table 1 row 2 cell 1</td>
                    <td>sub-table 1 row 2 cell 2</td>
                </tr>
                <tr>
                    <td>sub-table 1 row 3 cell 1</td>
                    <td>sub-table 1 row 3 cell 2</td>
                </tr>
            </table>
        </td>
        <td>Second Cell</td>
    </tr>
    <tr>
        <td class="contains-table">
            <table class="inner">
                <tr>
                    <td>sub-table 2 row 1 cell 1</td>
                    <td>sub-table 2 row 1 cell 2</td>
                </tr>
                <tr>
                    <td>sub-table 2 row 2 cell 1</td>
                    <td>sub-table 2 row 2 cell 2</td>
                </tr>
                <tr>
                    <td>sub-table 2 row 3 cell 1</td>
                    <td>sub-table 2 row 3 cell 2</td>
                </tr>
            </table>
        </td>
        <td>Third Cell</td>
        <td>Fourth Cell</td>
    </tr>
    <tr>
        <td class="contains-table">
            <table class="inner">
                <tr>
                    <td>sub-table 3 row 1 cell 1</td>
                    <td>sub-table 3 row 1 cell 2</td>
                </tr>
                <tr>
                    <td>sub-table 3 row 2 cell 1</td>
                    <td>sub-table 3 row 2 cell 2</td>
                </tr>
                <tr>
                    <td>sub-table 3 row 3 cell 1</td>
                    <td>sub-table 3 row 3 cell 2</td>
                </tr>
            </table>
        </td>
        <td>Fifth Cell</td>
        <td>Sixth Cell</td>
    </tr>
    <tr>
       ...

CSS

table.inner {
    /*border: outset 5pt;*/
    border-spacing: 10px;
    border-collapse: separate;
}
table.inner td {
    padding: 0px !important;
}
table.outer-table td {
    padding: 10px;
}
td.contains-table {
    padding: 0px !important;
}
td {
    border: inset 5px;
}

JavaScript

/*
$('table').css('border-spacing', '10px');
$('td').css('border', 'outset 5pt');
//$('table').css('margin', '10px');
//$('td').css('padding', '10px');
*/