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

HTML PHP

24 апреля 2026 1 ответ

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

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

Дополнительно:

Ответы:

table {   table-layout: fixed; }

table { table-layout: fixed; }

при добавлении table-layout: fixed; ничего не изменилось
при добавлении max-width: 100% в table тоже ничего не меняется
ksntheia, все колонки имеют заданную ширину
codepensnippet
Сергей delphinpro, а если мне нужно у tr оставить display: 'block'
ksntheia, ух ты, я и не заметил.
В это случае у вас уже нет таблицы, и не стоит ожидать табличного поведения.
А зачем это нужно-то?
Сергей delphinpro, нужно было у строк таблицы сделать border-radius

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

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

&lt;table style="100%"&gt;   &lt;thead&gt;      &lt;td&gt; &lt;!-- виртуальный --&gt;        &lt;tr style="display: block"&gt; &lt;!-- Ведет себя как див --&gt;           &lt;table&gt; &lt;!-- виртуальный, и здесь нет растяжки на 100% --&gt;           &lt;tr&gt; &lt;!-- виртуальный --&gt;             &lt;th style="width:15%"&gt; TH1 &lt;/th&gt;             &lt;th style="width:25%"&gt; TH2 &lt;/th&gt;             &lt;th style="width:20%"&gt; TH3 &lt;/th&gt;             &lt;th style="width:20%"&gt; TH4 &lt;/th&gt;             &lt;th style="width:20%"&gt; TH5 &lt;/th&gt;           &lt;/tr&gt; &lt;!-- виртуальный --&gt;         &lt;/table&gt; &lt;!-- виртуальный --&gt;        &lt;/tr&gt; &lt;!-- а-ля див --&gt;      &lt;/td&gt; &lt;!-- виртуальный --&gt;    &lt;/thead&gt; &lt;/table&gt;

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Мария Код Ответ

26 апреля 2026 в 23:58

Для того чтобы заставить колонки таблицы принять заданную ширину, вам нужно использовать атрибуты стиля CSS или атрибуты HTML для каждой колонки.

Если вы хотите задать ширину колонкам таблицы в процентах, вы можете использовать следующий CSS код:

 
    table {
        width: 100%;
    }
    td {
        width: 33.33%;
    }

table { width: 100%; } td { width: 33.33%; }

В этом примере каждая колонка будет занимать 33.33% ширины таблицы.

Если вы хотите задать ширину колонкам таблицы в пикселях, вы можете использовать следующий CSS код:

 
    table {
        width: 100%;
    }
    td {
        width: 100px;
    }

table { width: 100%; } td { width: 100px; }

В этом примере каждая колонка будет занимать 100 пикселей ширины.

Если вы хотите задать разную ширину для каждой колонки, вы можете использовать атрибуты HTML для каждой колонки:

<table>
    <tr>
        <td width="100px">Колонка 1</td>
        <td width="200px">Колонка 2</td>
        <td width="300px">Колонка 3</td>
    </tr>
</table>

<table> <tr> <td width="100px">Колонка 1</td> <td width="200px">Колонка 2</td> <td width="300px">Колонка 3</td> </tr> </table>

В этом примере первая колонка будет занимать 100 пикселей, вторая - 200 пикселей и третья - 300 пикселей.

Надеюсь, эти примеры помогут вам управлять шириной колонок в таблице на вашем веб-сайте. Если у вас есть дополнительные вопросы, не стесняйтесь задавать их!

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ JavaScript Как мне в данном запросе обработать ошибку с определенным статусом? 1 ответ

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

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно