БЛОГ НА HUSL


Не изменяется ширина ячеек таблицы css

Автор вопроса: anton_63

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

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


Источник

Ответы (1 шт):

Автор решения: Kniha m

Надо использовать 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>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.