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

Question

[Issue]

Имеется уже готовая таблица с шапкой (подписанными столбцами) и php код, который в последствии будет выводить строки в эту таблицу. Нужно, чтобы ширина каждой ячейки для строк <tr> соответствовала ширине ячеек в шапке. Читал статьи, по идее table-layout должен был помочь с этим, но у меня ничего не получается и результат меня совсем не устраивает. Как реализовать задумку? Содержимое ячеек различается, но ширина должна быть фиксированной.

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

Comments

[Issue]

Текущий результат:

[Issue]

Почему то часть текста обрезалась....

[Issue]

Так же пробовал заменить tr на th в thead, не помогло..

[Ankhena]

Issue,
Стили-то где?
Сделайте песочницу на jsfiddle.net со скомпилированным кодом.

table-layout: fixed вижу, а остального нет.
Ну или самостоятельно почитайте нюансы работы этого свойства.

[Issue]

Ankhena, чего остального нет?

table-layout: fixed вижу, а остального нет.

[Ankhena]

Issue, Слушайте, не бесите, вот честно. У вас вопросов уже скоро сотня будет, могли бы научиться спрашивать. Не хотите разбираться со своим же вопросом, так и не публикуйте его.

Вот ваш код в песочнице: https://jsfiddle.net/owdmj2ry/
И там всё работает, что не удивительно.

Значит, нужно сделать песочницу, которая воспроизводит вашу проблему.

Answer 1

[Antony Bark]

table {
  table-layout: fixed;
}
th,
td {
    max-width: 2rem;
    overflow: hidden;
/* or
    text-overflow: ellipsis;
*/
}