html – How to apply custom width to table headers using bootstrap/css?-ThrowExceptions

Exception or error:

I have a table in html and want to apply custom width to each header of table. But unfortunately it’s not applying. I have bootstrap4 integrated in my html.

Here is my full html table code

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

Here is my full code jsfiddle link

Why custom widths are not applying?

How to solve:

To give custom width use style="width: 2000px;".

You have not used proper bootstrap classes…

Take a look at https://getbootstrap.com/docs/4.0/content/tables/ .

Check this code:

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

Check out the image Here

Check out the Live code here: https://codepen.io/manaskhandelwal1/pen/WNvoVeg

Leave a Reply

Your email address will not be published. Required fields are marked *