Форматирование таблиц в CSS

67
8

У меня есть таблица с двумя уровнями заголовков, первый уровень имеет разные колпаны, и я хотел бы, чтобы это выглядело как изображение ниже.

Я могу сосредоточить текст на первом уровне заголовков, но я не могу сделать границы так, как я этого хочу.

HTML-код создается серверной стороной, поэтому я хотел бы сделать все форматирование в файле CSS.

Любая помощь будет оценена по достоинству.

the table

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>

спросил(а) 2014-01-15T10:08:00+04:00 6 лет, 5 месяцев назад
1
Решение
55

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>

Это более длинный путь, но он должен вас начать..

ответил(а) 2014-01-15T10:33:00+04:00 6 лет, 5 месяцев назад
54

css-border вы приоритет?

working demo

CSS

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

РЕДАКТИРОВАТЬ

в этой демонстрации нет классов

Просто добавьте это в свой 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;
}

EDIT 2

final work

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

ответил(а) 2014-01-15T10:40:00+04:00 6 лет, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема