paulenot
@paulenot
IT Issue

Как сделать ширину столбца html одинаковой для всех строк?

Имеется уже готовая таблица с шапкой (подписанными столбцами) и php код, который в последствии будет выводить строки в эту таблицу. Нужно, чтобы ширина каждой ячейки для строк <tr> соответствовала ширине ячеек в шапке. Читал статьи, по идее table-layout должен был помочь с этим, но у меня ничего не получается и результат меня совсем не устраивает. Как реализовать задумку? Содержимое ячеек различается, но ширина должна быть фиксированной.
60b05ef8e2dd9959627160.png
<table class="table table-striped" style="table-layout: fixed;">
  <thead>
    <tr>
      <td>Номер</td>
      <td>Закупка</td>
      <td>Наименование</td>
      <td>Заказчик</td>
      <td>Менеджер</td>
      <td>Дата заключения</td>
      <td>Дата исполнения</td>
      <td>Сумма договора</td>
      <td>Себестоимость</td>
      <td>Налоги</td>
      <td>Штрафы</td>
      <td>Чистая прибыль</td>
      <td>Рентабельность %</td>
      <td>Гарантийные обязательства</td>
      <td>Обеспечение</td>
      <td>Стоимость доставки</td>
      <td>Статус заказчика</td>
      <td>Статус подрядчика</td>
      <td>Статус исполнения</td>
      <td>Риски</td>
      <td>Исполнение %</td>
      <td>Статус проблемности</td>
      <td>Дата добавления</td>
    </tr>
  </thead>
  <tbody>
    @php
      echo '<tr>
        <td>1</td><!--Номер-->
        <td>2</td><!--Закупка-->
        <td>3</td><!--Наименование-->
        <td></td><!--Заказчик-->
        <td></td><!--Менеджер-->
        <td></td><!--Дата заключения-->
        <td></td><!--Дата исполнения-->
        <td></td><!--Сумма договора-->
        <td></td><!--Себестоимость-->
        <td></td><!--Налоги-->
        <td></td><!--Штрафы-->
        <td></td><!--Чистая прибыль-->
        <td></td><!--Рентабельность %-->
        <td></td><!--Гарантийные обязательства-->
        <td></td><!--Обеспечение-->
        <td></td><!--Стоимость доставки-->
        <td></td><!--Статус заказчика-->
        <td></td><!--Статус подрядчика-->
        <td></td><!--Статус исполнения-->
        <td></td><!--Риски-->
        <td></td><!--Исполнение %-->
        <td></td><!--Статус проблемности-->
        <td></td><!--Дата добавления-->
      </tr>';
    @endphp
    </tbody>
  </table>
  • Вопрос задан
  • 277 просмотров
Пригласить эксперта
Ответы на вопрос 1
tolfy
@tolfy
Фирменный стиль
table {
  table-layout: fixed;
}
th,
td {
    max-width: 2rem;
    overflow: hidden;
/* or
    text-overflow: ellipsis;
*/
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы