在css中整蠱表格格式

Question

我有一個兩級標題的表格，第一級有不同的colspans，我希望它看起來像下面的圖片。

我可以將文本居中在第一級標題中，但我無法設置按照我想要的方式來設置邊框。

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> 

這是一個較長的方式，但它應該讓你開始..

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添加此，你會爲f無需製作課程並且具有相同的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; 
} 

EDIT 2

final work

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