0

Необходимо сверстать таблицу такого вида http://prntscr.com/np9itv , при этом сверстать нужно именно стандартной таблицей, не div, стили можно использовать только инлайновые по минимуму. Подскажите, как в столбце "Сумма" сделать на одну ячейку больше, чем во всех остальных столбцах?

1 ответ 1

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>&nbsp;</td>
    </tr>
  </tbody>
</table>

1
  • 1
    Если захочется добавить цвет бекграунда - снова будет видно. Поэтому можно скрывать его уж наверняка .hidden { visibility: hidden; opacity: 0; } 16 мая 2019 в 9:00

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.