Как применить произвольную ширину к заголовкам таблицы, используя bootstrap / css?

Question

У меня есть table в html и я хочу применить пользовательский width к каждому header из table. Но, к сожалению, это не относится. Я bootstrap4 интегрирован в мой html.

Вот мой полный html код таблицы

<div class="row">
  <div class="col-12">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th class="user-profile-th" style="width:10%;">
                        <label class="container-checkbox"><input class="site-checkbox "
                                type="checkbox" ><span
                                class="checkmark-checkbox"></span></label></th>
                    <th class="user-profile-th brand" style="width:20%;">Brand</th>
                    <th class="user-profile-th link-code" style="width:40%;">Link/Code</th>
                    <th class="user-profile-th" style="width:15%;">Clicks</th>
                    <th class="user-profile-th" id="status" style="width:15%;">Status</th>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td><label class="container-checkbox"><input class="site-checkbox"
                                type="checkbox"><span class="checkmark-checkbox"></span></label></td>
                    <td>ClassPass</td>
                    <td class="refrl">
                        www.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pk
                    </td>
                    <td>0</td>
                    <td>
                        <div class="tag-cstm rejected"> Rejected </div>
                    </td>
                </tr>
                <tr>
                    <td><label class="container-checkbox"><input class="site-checkbox"
                                type="checkbox"><span class="checkmark-checkbox"></span></label></td>
                    <td>Fave</td>
                    <td class="refrl">www.yoyo.com</td>
                    <td>0</td>
                    <td>
                        <div class="tag-cstm rejected"> Rejected </div>
                    </td>
                </tr>
                <tr>
                    <td><label class="container-checkbox"><input class="site-checkbox "
                                type="checkbox"><span class="checkmark-checkbox"></span></label></td>
                    <td>artificial inteliggence</td>
                    <td class="refrl">www.xyxx.com</td>
                    <td>0</td>
                    <td>
                        <div class="tag-cstm approved"> Approved </div>
                    </td>
                </tr>
                <tr>
                    <td><label class="container-checkbox"><input class="site-checkbox "
                                type="checkbox"><span class="checkmark-checkbox"></span></label></td>
                    <td>polymorphism</td>
                    <td class="refrl">www.oopconcepts.com</td>
                    <td>0</td>
                    <td>
                        <div class="tag-cstm pending"> Pending </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
    </div>
</div>

Вот мой полный код jsfiddle ссылка

Почему пользовательские ширины не применяются?

Answer 1

Чтобы задать пользовательскую ширину, используйте style="width: 2000px;".

Вы не использовали bootstrap классов ...

Взгляните на https://getbootstrap.com/docs/4.0/content/tables/.

Проверьте этот код:

<table class="table">
<thead class="thead-dark">
    <tr>
        <th style="width: 2000px;" scope="col">#</th>
        <th scope="col">First</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
    </tr>
</tbody>

Проверьте изображение Здесь

Проверьте код в реальном времени здесь: https://codepen.io/manaskhandelwal1/pen/WNvoVeg