Необходимо сверстать таблицу такого вида http://prntscr.com/np9itv , при этом сверстать нужно именно стандартной таблицей, не div, стили можно использовать только инлайновые по минимуму. Подскажите, как в столбце "Сумма" сделать на одну ячейку больше, чем во всех остальных столбцах?
1 ответ
Нужно использовать colspan
чтобы объединить столбцы и показать лишь те ячейки которые нужно, остальные спрятать (т.к. нельзя отрезать кусок таблицы в html) к примеру вот так:
table {
width: 100%;
/*border-spacing: 0;*/
}
table th,
table td {
border: 1px solid black;
}
table tbody tr td:first-child {
text-align: center;
}
.hidden {
border: 0;
}
<table>
<thead>
<tr>
<th>№</th>
<th>Наименование работы (услуги)</th>
<th>Количество</th>
<th>Сумма</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3" class="hidden"></td>
<td> </td>
</tr>
</tbody>
</table>
-
1Если захочется добавить цвет бекграунда - снова будет видно. Поэтому можно скрывать его уж наверняка
.hidden { visibility: hidden; opacity: 0; }
16 мая 2019 в 9:00