Всем привет! Ни в какую не получается изменить ширину ячеек. Получается результат как на картинке
Мне нужно уменьшить ширину столбца кратность(чтобы он был по ширине такой же как объем), подогнать ширину столбцов дней недели соответственно под кратность и объем и увеличить ширину первых 2-х столбцов. Уже что только не пробовал, перечитал много статей, но все безуспешно. Подскажите пожалуйста.
Хочу получить вот такой результат
.table {
width: 100%;
text-align: center;
font-size: 15px;
border-collapse: collapse;
border: 1px solid black;
/*empty-cells: show;*/
}
.border-table {
border-collapse: collapse;
border: 1px solid black;
}
td.vertical {
text-align: left;
writing-mode: tb-rl;
transform: rotate(180deg);
width: 4%;
}
.weekday {
width: 8%;
height: 30px;
}
<div>
<table class="table">
<tr class="border-table">
<td rowspan="2" style="width: 20%">Наименование социальной услуги по уходу</td>
<td rowspan="2" style="width: 20%">Объем и периодичность социальной услуги по уходу</td>
<td colspan="2" class="weekday">Пн</td>
<td colspan="2" class="weekday">Вт</td>
<td colspan="2" class="weekday">Ср</td>
<td colspan="2" class="weekday">Чт</td>
<td colspan="2" class="weekday">Пт</td>
<td colspan="2" class="weekday">Сб</td>
<td colspan="2" class="weekday">Вс</td>
<td rowspan="2" class="vertical">Итого (в мин.)</td>
</tr>
<tr class="border-table">
<td class="vertical">Кратность</td>
<td class="vertical">Объем (в мин.)<sup>3</sup></td>
<td class="vertical">Кратность</td>
<td class="vertical">Объем (в мин.)</td>
<td class="vertical">Кратность</td>
<td class="vertical">Объем (в мин.)</td>
<td class="vertical">Кратность</td>
<td class="vertical">Объем (в мин.)</td>
<td class="vertical">Кратность</td>
<td class="vertical">Объем (в мин.)</td>
<td class="vertical">Кратность</td>
<td class="vertical">Объем (в мин.)</td>
<td class="vertical">Кратность</td>
<td class="vertical">Объем (в мин.)</td>
</tr>
<tr class="border-table">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="border-table">
<td colspan="2">Итого (в минутах)</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>
java
? Удаляю метку.