html - CSS 中棘手的表格格式

Question

我有一个包含两级标题的表格，第一级具有不同的列跨度，我希望它如下图所示。

我可以将文本置于第一级标题的中心，但我无法按照我想要的方式设置边框。

HTML 代码是在服务器端生成的，因此我想在 CSS 文件中进行所有格式设置。

如有任何帮助，我们将不胜感激。

jsFiddle link

HTML 代码如下:

    <table>
<tr>
    <th align=left></th>
    <th text-align=center colspan=5>Account</th>
    <th text-align=center colspan=1>Global</th>
    <th text-align=center colspan=3>Office</th>
    <th text-align=center colspan=13>Strategy</th>
</tr>
<tr>
    <th align=left></th>
    <th>AGRMF</th>
    <th>AIEMF</th>
    <th>AISAR</th>
    <th>ALPHA</th>
    <th>SGAM</th>
    <th>Global</th>
    <th>ASIA</th>
    <th>COMBINED</th>
    <th>NY</th>
    <th>ACA</th>
    <th>AJ</th>
    <th>AM</th>
    <th>ARGO</th>
    <th>AV</th>
    <th>AY</th>
    <th>EMFI</th>
    <th>EVNT</th>
    <th>GDM</th>
    <th>GXM</th>
    <th>LMT</th>
    <th>QUAD</th>
    <th>XMV</th>
</tr>
<tr>
    <th align=left>BalanceSheetLeverage</th>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
</tr>
<tr>
    <th align=left>CounterpartyRisk</th>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
    <td align=center>content</td>
</tr>

Answer 1

jsFiddle:http://jsfiddle.net/fQvLv/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>

这是一条较长的路，但它应该可以帮助您入门..