Т.е. чтобы у ячеек был отступ от краев таблицы, как это сделать? Пробовал паддингами, но они не работают на ячейку, а только на её содержимое.
1 ответ
Можно попробовать "накостылить" с дополнительными ячейками.
table {
width: 250px;
height: 50px;
text-align: center;
vertical-align: middle;
border-collapse: collapse;
}
td {
border: 2px solid blue;
margin: 10px;
background-color: white;
padding: 10px;
}
.brdL,
.brdR {
width: 5px;
border-top: none;
border-bottom: none;
padding: 0;
}
.trTop td,
.trBot td{
height: 5px;
}
.trTop .brdL,
.trTop .brdR {
border-top: 2px solid blue;
}
.trBot .brdL,
.trBot .brdR {
border-bottom: 2px solid blue;
}
.brdLR {
border-left: none;
border-right: none;
padding: 0;
}
.brdL {
border-right: none;
}
.brdR {
border-left: none;
}
<table>
<tr class="trTop">
<td class="brdL"></td>
<td colspan="4" class="brdLR"></td>
<td class="brdR"></td>
</tr>
<tr>
<td class="brdL"></td>
<td colspan="2">12</td>
<td colspan="2">24</td>
<td class="brdR"></td>
</tr>
<tr>
<td class="brdL"></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td class="brdR"></td>
</tr>
<tr class="trBot">
<td class="brdL"></td>
<td colspan="4" class="brdLR"></td>
<td class="brdR"></td>
</tr>
</table>
padding
илиmargin
. Из вопроса не понятно, усерединить текст или добавить отсупы слева. От каких краёв, только слева или со всех, неизвестноcellpadding
нужен