Question

我有一个包含两个标题级别的表格，第一个级别有不同的colspans，我希望它看起来像下面的图像。

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

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

任何帮助都将不胜感激。

the table

下面的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>

这是一个更长的路，但它应该让你开始..

Answer 2

是css-border你的优先权吗？

working demo

<强> CSS

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

修改

no classes needed in this demo

只需在你的css中添加它就可以在没有制作类并且具有相同的HTML标记的情况下完成!!

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; }

编辑2

final work

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

在css中整理表格式

2 个答案: