How to set column width in Bootstrap 4 table?

Question

css

Hello, there was such problem - there is a table, with three columns. The table has the class .table-responsive and includes three columns - number, date and key. I can’t change the width of the columns in any way, it looks especially critical on devices with small screens. How can this be fixed?

Answer 1

In general, I was clearly in a hurry with the question - the prohibition of word wrap white-space: nowrap helped

Answer 2

Everything is there, you just don’t know how to read the documentation, there you can ask yourself in thead, but this method also has its drawbacks, in particular, with large tables, you still have to do horizontal scrolling, since tables are basically not adaptive.
But, I use a different method, it allows you to make tables fully responsive without a single line of code and js, while all bootstrap classes for tables continue to work.

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

Answer 3

The .table-responsive class is not applied to the table itself, but to the wrapper. For example div.
And to set the size, you need to set, in fact, the size. The width attribute will invalidate the code, so either styles or js on the fly.
Well, the prohibition of hyphenation makes layout most often painful.