Как задать ширину колонке в таблице Bootstrap 4?

Question

[YakutD]

Здравствуйте, возникла такая проблема- есть таблица, с тремя колонками. Таблица имеет класс .table-responsive и включает в себя три столбца - номер, дата и ключ. Никак не могу изменить ширину колонок, особенно это критично смотрится на устройствах с небольшими экранами. Как это можно исправить?

Answer 1

[YakutD]

Вообщем с вопросом я явно поспешил - помог запрет переноса слов white-space: nowrap

Answer 2

[Виктор Таран]

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

Но, я использую другой метод, он позволяет без единой сторчки кода и js сделать полностью адаптивными таблицы, при этом все классы бутстрап для таблиц продолжают работать.

<table class="table table-hover shoplist">
    <thead>
    <tr><th class="col-lg-12">Данный товар доступен в следующих магазинах</th></tr>
    </thead>
    <tbody>
        <tr class="shopunit" data-sizes="[&quot;4&quot;, &quot;3&quot;, &quot;2&quot;, &quot;1&quot;]">
            <td>
                <div class="row">
                    <div class="col-md-2 col-sm-3 col-xs-6 ">г.Москва<div class="visible-sm">Пражская</div></div>
                    <div class="col-md-5 col-sm-5 col-xs-12 "></div>
                    <div class="col-md-3 col-sm-3 col-xs-12 hidden-sm"><i class="fa fa-subway"></i>&nbsp;Пражская</div>
                    <div class="col-md-2 col-sm-4 col-xs-12"><i class="fa fa-clock-o fa-2"></i>&nbsp;пн-вс с 10 до 22</div>
                </div>
            </td>
        </tr>
        <tr class="shopunit" data-sizes="[&quot;4&quot;, &quot;3&quot;, &quot;2&quot;, &quot;1&quot;]">
            <td>
                <div class="row">
                    <div class="col-md-2 col-sm-3 col-xs-6 ">г.Санкт-Петербург<div class="visible-sm">Озерки</div></div>
                    <div class="col-md-5 col-sm-5 col-xs-12 "></div>
                    <div class="col-md-3 col-sm-3 col-xs-12 hidden-sm"><i class="fa fa-subway"></i>&nbsp;Озерки</div>
                    <div class="col-md-2 col-sm-4 col-xs-12"><i class="fa fa-clock-o fa-2"></i>&nbsp;пн-вс с 10 до 22</div>
                </div>
            </td>
        </tr>
  </tbody>
</table>

Comments

[YakutD]

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

[YakutD]

Виктор Таран, в любом случае проблема уже решена,спасибо за ваш ответ

[Алексей Смирнов]

Спасибо! Очень интересное решение!

Answer 3

[Арсений Матыцин]

Класс .table-responsive применяется не к самой таблице, а к обертке. Например div.
А чтобы задать размер, нужно задать, собственно, размер. Атрибут width приведет к невалидности кода, поэтому либо стилями, либо js на лету.
Ну а запрет переносов делает верстке чаще всего больно.

Comments

[YakutD]

На скриншоте же видно что я использую этот класс, обратите внимание на горизонтальную прокрутку :) в любом случае проблема уже решена, спасибо за ваш ответ