如何使用bootstrap / css将自定义宽度应用于表格标题？

debugcn 发表于 Dev

Fahad Hassan |

我有一个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链接

为什么自定义宽度不适用？

玛纳斯·坎德尔瓦尔

要使用自定义宽度style="width: 2000px;"。

您没有使用正确的引导程序类...

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。