Tricky table formatting in css

Question 1

CSS

.level-one-left{
    border:2px solid #000; 
    border-right:1px solid #000;
}
.level-one-right{
    border:2px solid #000; 
    border-left:1px solid #000;
}
.level-two-left{
    border:2px solid #000; 
    border-right:1px solid #000;
    border-top:0px;

}
.level-two-right{
    border:2px solid #000; 
    border-left:1px solid #000;
    border-top:0px;
}
.left-side{
    border-left:2px solid #000;  
}
.right{
    border-right:2px solid #000;
}
.top{
    border-top:2px solid #000;
}
.bottom{
    border-bottom:2px solid #000;
}

HTML

<table cellspacing="0">
    <tr>
        <td style="border:0"></td>
        <th class="level-one-left" colspan="5">Level One</th>
        <th class="level-one-right" colspan="3">Level One</th>
    </tr>
    <tr>
        <td></td>
        <th class="level-two-left" colspan="5">
            <table>
                <tr>
                    <th>Level Two</th>
                    <th>Level Two</th>
                    <th>Level Two</th>
                    <th>Level Two</th>
                    <th>Level Two</th>
                </tr>
            </table>
        </th>
        <th class="level-two-right" colspan="3">
        <table>
                <tr>
                    <th>Level Two</th>
                    <th>Level Two</th>
                    <th>Level Two</th>
                </tr>
            </table>
        </th>
    </tr>
    <tr>
        <th class="left-side top right">Test One</th>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td class="right">Content</td>
        <td>Content</td>
        <td>Content</td>
        <td class="right">Content</td>
    </tr>
        <tr>
        <th class="left-side right">Test Two</th>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td class="right">Content</td>
        <td>Content</td>
        <td>Content</td>
        <td class="right">Content</td>
    </tr>
        <tr>
        <th class="left-side right">Test Three</th>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td class="right">Content</td>
        <td>Content</td>
        <td>Content</td>
        <td class="right">Content</td>
    </tr>
        <tr>
        <th class="left-side right">Test Four</th>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td class="right">Content</td>
        <td>Content</td>
        <td>Content</td>
        <td class="right">Content</td>
    </tr>
        <tr>
        <th class="left-side right bottom">Test Five</th>
        <td class="bottom">Content</td>
        <td class="bottom">Content</td>
        <td class="bottom">Content</td>
        <td class="bottom">Content</td>
        <td class="bottom right">Content</td>
        <td class="bottom">Content</td>
        <td class="bottom">Content</td>
        <td class="bottom right">Content</td>
    </tr>
</table>

It's a longer way but it should get you started..

Question 2

is css-border you priority??

working demo

css

table,tr,th,td{
    border:1px solid black; /*<-- define borders */
    border-spacing: 0px; /*<-- cellspacing */
    border-collapse: separate;/*<-- cellpadding */
}

EDIT

no classes needed in this demo

Just add this in your css and you will be fine without making classes and have the same HTML markup!!

table{
    border-collapse: collapse;
}
th,td{
    border:1px solid black;
    border-spacing: 0px;
    padding:0;
    margin:0;
}

table tr:nth-child(1) th:nth-child(1)
{
    border:none;
}
table tr:nth-child(2) th:nth-child(1)
{
    border:none;
}

EDIT 2

final work

 ___^^___ this contains your exact markup as per pic!!