Использую следующий код:
| Код | <table class="table w-100">
<caption>Members</caption>
<thead>
<tr>
<th/>
<th>E-mail</th>
<th>Pass hash</th>
<th>Pass salt</th>
<th/>
<th/>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>134a3bb0ece2e91f91c39c060cd6c120</td>
<td>123456</td>
<td>0</td>
<td/>
</tr>
</tbody>
</table> |
| Код | .w-100 {
width: 100%;
}
table.table {
border-collapse: collapse;
border: 1px solid #cccccc;
margin-bottom: 10px;
caption-side: top;
}
table.table tbody {
{b}margin: 0;{/b}
}
table.table tr {
border: 0;
}
table.table caption {
padding: 2px;
border: 1px solid #cccccc;
color: #000000;
background: #cccccc;
margin-left: -1px;
font-weight: bold;
text-align: center;
}
/* Opera 6+ hack */
@media screen and (min-width: 0px) {
table.table caption {
margin: 0;
}
}
table.table tr th {
padding: 2px;
border: 1px solid #cccccc;
color: #000000;
font-weight: bold;
text-align: center;
}
table.table tr td {
padding: 2px;
border: 1px solid #cccccc;
} |
К сожалению, если таблица шире заголовка, то всё выглядит как мне хочется(  ), но если маленькая, то заголовок получается шире таблицы. к сожалению мои попытки выставить нулевые допуски у тела или 100% ширину не увенчались успехом. Возможно приведённый на скрине пример и не блещет оригинальностью, но возможно кто-то знает более действенный способ?
P.S. Или может быть не стоит использовать caption, а заменить всё на див(див,таблица)? |