CODEWITHSUNDEEP
htmlcsshtml-tablecss-tables
Chapo
Chapo

Reputation: 2543

Tricky table formatting in css

I have a table with two levels of headers, the first level having different colspans, and I would like it to look like the below image.

I can center the text in the first level of headers but I can't manage to do the borders the way I want it.

The HTML code is generated server-side so I would like to do all formatting in a CSS file.

Any help would be appreciated.

the table

jsFiddle link

HTML Code below:

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

Upvotes: 2

Views: 291

Answers (2)

NoobEditor
NoobEditor

Reputation: 15891

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!!

Upvotes: 1

I am Cavic
I am Cavic

Reputation: 1085

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>

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

Upvotes: 1

Related Questions