1

Всем привет! Ни в какую не получается изменить ширину ячеек. Получается результат как на картинке введите сюда описание изображения

Мне нужно уменьшить ширину столбца кратность(чтобы он был по ширине такой же как объем), подогнать ширину столбцов дней недели соответственно под кратность и объем и увеличить ширину первых 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>

4
  • Приложите картинку того что хотите получить в итоге.
    – Kniha m
    4 мая в 13:49
  • Если тут запустить твой код - картинка получается иная, не такая как на твоей картинке...
    – ksa
    4 мая в 14:00
  • Приложил картинку того, что хочу получить. Не понимаю почему при запуске кода тут, получается иначе
    – anton_63
    4 мая в 14:03
  • А при чём здесь java? Удаляю метку. 4 мая в 14:07

1 ответ 1

2

Надо использовать tbody и thead тогда нормально можно задать размеры для колонок. Совет на будущее если надо фиксировать ширину колонок, то одну колонку в таблице лучше оставлять без ширины, что бы таблица могла перестроится.

td, th {
    border: 1px solid black;
}

table {
  text-align: center;
  font-size: 15px;
  border-collapse: collapse;
  table-layout: auto;
}

.vertical {
  text-align: left;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  width: 20px;
}

.weekday {
  height: 30px;
}
<table>
  <thead>
    <tr>
      <th rowspan="2">Наименование социальной услуги по уходу</th>
      <th rowspan="2" style="width: 20%">Объем и периодичность социальной услуги по уходу</th>
      <th colspan="2" class="weekday">Пн</th>
      <th colspan="2" class="weekday">Вт</th>
      <th colspan="2" class="weekday">Ср</th>
      <th colspan="2" class="weekday">Чт</th>
      <th colspan="2" class="weekday">Пт</th>
      <th colspan="2" class="weekday">Сб</th>
      <th colspan="2" class="weekday">Вс</th>
      <th rowspan="2" class="vertical">Итого (в мин.)</th>
    </tr>
    <tr>
      <th class="vertical">Кратность</th>
      <th class="vertical">Объем (в мин.)<sup>3</sup></th>
      <th class="vertical">Кратность</th>
      <th class="vertical">Объем (в мин.)</th>
      <th class="vertical">Кратность</th>
      <th class="vertical">Объем (в мин.)</th>
      <th class="vertical">Кратность</th>
      <th class="vertical">Объем (в мин.)</th>
      <th class="vertical">Кратность</th>
      <th class="vertical">Объем (в мин.)</th>
      <th class="vertical">Кратность</th>
      <th class="vertical">Объем (в мин.)</th>
      <th class="vertical">Кратность</th>
      <th class="vertical">Объем (в мин.)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <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>
  </tbody>
  <tfoot>
    <tr>
      <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>

  </tfoot>
</table>

UPDATE for PDF

td,
th {
  border: 1px solid black;
}

table {
  text-align: center;
  font-size: 15px;
  border-collapse: collapse;
  table-layout: fixed;
}

.vertical {
  text-align: left;
  writing-mode: tb-rl;
  transform: rotate(180deg); 
}

.weekday {
  height: 30px;
}
<table>
  <colgroup>
    <col />
    <col style="width: 20%" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
    <col style="width: 20px" />
  </colgroup>

  <tr>
    <th rowspan="2">Наименование социальной услуги по уходу</th>
    <th rowspan="2">Объем и периодичность социальной услуги по уходу</th>
    <th colspan="2" class="weekday">Пн</th>
    <th colspan="2" class="weekday">Вт</th>
    <th colspan="2" class="weekday">Ср</th>
    <th colspan="2" class="weekday">Чт</th>
    <th colspan="2" class="weekday">Пт</th>
    <th colspan="2" class="weekday">Сб</th>
    <th colspan="2" class="weekday">Вс</th>
    <th rowspan="2" class="vertical">Итого (в мин.)</th>
  </tr>
  <tr>
    <th class="vertical">Кратность</th>
    <th class="vertical">Объем (в мин.)<sup>3</sup></th>
    <th class="vertical">Кратность</th>
    <th class="vertical">Объем (в мин.)</th>
    <th class="vertical">Кратность</th>
    <th class="vertical">Объем (в мин.)</th>
    <th class="vertical">Кратность</th>
    <th class="vertical">Объем (в мин.)</th>
    <th class="vertical">Кратность</th>
    <th class="vertical">Объем (в мин.)</th>
    <th class="vertical">Кратность</th>
    <th class="vertical">Объем (в мин.)</th>
    <th class="vertical">Кратность</th>
    <th class="vertical">Объем (в мин.)</th>
  </tr>

  <tr>
    <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>
    <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>

7
  • Сделал по вашему примеру, текст не повернулся вообще...и ширина не изменилась
    – anton_63
    4 мая в 14:15
  • @anton_63, <th rowspan="2">Наименование социальной услуги по уходу</th> без class и style ?
    – Kniha m
    4 мая в 14:26
  • попробую завтра еще раз, может не правильно стили прописал
    – anton_63
    4 мая в 15:22
  • неа, сделал все так же, получается вот так ibb.co/pd2zSX2
    – anton_63
    5 мая в 3:51
  • @anton_63, часом браузер не IE?
    – Kniha m
    5 мая в 6:04

Ваш ответ

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

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