如何使用 bootstrap/css 将自定义宽度应用于表头？答案

【问题标题】：How to apply custom width to table headers using bootstrap/css?如何使用 bootstrap/css 将自定义宽度应用于表头？
【发布时间】：2020-06-06 22:58:02
【问题描述】：

我在html 中有一个table，并希望将自定义width 应用于header 的每个header。但不幸的是它不适用。我的 html 中集成了 bootstrap4。

这是我的完整 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 link

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

【问题讨论】：

标签： html css html-table bootstrap-4

【解决方案1】：

要提供自定义宽度，请使用 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>

Check out the image Here

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

【讨论】：