Как заставить колонки таблицы принять заданную ширину?

Question

[ksntheia]

Почему при данной разметке колонки не размещаются по всей таблице с указанным значение width, а располагаются близко друг к другу?

<table style={{ width: '100%' }}>
  <thead>
    <tr style={{width: '100%', display: 'block'}}>
                    <th style={{ width: '15%', textAlign: 'start' }}> TH1 </th>
                    <th style={{ width: '25%', textAlign: 'start' }}>
                        TH2
                    </th>
                    <th style={{width: '20%'}}>
                        TH3
                    </th>
                    <th style={{width: '20%'}}>
                        <img src={...} height={'20px'} />
                        TH4
                    </th>
                    <th style={{width: '20%'}}>
                        TH5
                    </th>
                </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Answer 1

[Сергей delphinpro]

table {
  table-layout: fixed;
}

Comments

[ksntheia]

при добавлении table-layout: fixed; ничего не изменилось
при добавлении max-width: 100% в table тоже ничего не меняется

[Сергей delphinpro]

ksntheia, все колонки имеют заданную ширину

codepen

[ksntheia]

Сергей delphinpro, а если мне нужно у tr оставить display: 'block'

[Сергей delphinpro]

ksntheia, ух ты, я и не заметил.

В это случае у вас уже нет таблицы, и не стоит ожидать табличного поведения.
А зачем это нужно-то?

[ksntheia]

Сергей delphinpro, нужно было у строк таблицы сделать border-radius

[Сергей delphinpro]

ksntheia, Технически в этом случае таблица получается поломанная и невалидная. Блочный элемент не может быть потоком table-* кроме table-cell

Браузер в меру своих возможностей пытается восстановить недостающие элементы, добавляя виртуальные, и получается примерно следующее

<table style="100%">
  <thead>

    <td> <!-- виртуальный -->

      <tr style="display: block"> <!-- Ведет себя как див --> 

        <table> <!-- виртуальный, и здесь нет растяжки на 100% -->
          <tr> <!-- виртуальный -->
            <th style="width:15%"> TH1 </th>
            <th style="width:25%"> TH2 </th>
            <th style="width:20%"> TH3 </th>
            <th style="width:20%"> TH4 </th>
            <th style="width:20%"> TH5 </th>
          </tr> <!-- виртуальный -->
        </table> <!-- виртуальный -->

      </tr> <!-- а-ля див -->

    </td> <!-- виртуальный -->

  </thead>
</table>