Bootstrap 4 中具有实际列宽的表格

Question

我正在尝试在 Bootstrap 4 中做类似的事情，设置 table 的列（以像素为单位），具有固定值，强制在卡内水平滚动，但不起作用。这些列没有我想要的大小。所有设备的列大小都相同。

   <div class="row">
       <div class="col-12">
           <div class="card">
               <div class="card-body">
                   <table class="table-sm table-hover table-bordered text-center">
                       <thead>
                           <tr class="text-uppercase font-size-1">
                               <th width="500px" class="font-weight-medium"></th>
                               <th width="500px" class="font-weight-medium">produto</th>
                               <th width="500px" class="font-weight-medium">status</th>
                               <th width="500px" class="font-weight-medium">sku</th>
                               <th width="500px" class="font-weight-medium">preço</th>
                               <th width="500px" class="font-weight-medium">estoque</th>
                           </tr>
                       </thead>
                   </table>
               </div>
           </div>
       </div>
   </div>

我做错了什么？

Answer 1

您需要放置正确的内联样式标签

<th style="width:500px;">

Answer 2

示例代码似乎确实有效

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <table class="table-sm table-hover table-bordered text-center">
                    <thead>
                    <tr class="text-uppercase font-size-1">
                        <th style="width:100px" class="font-weight-medium">first</th>
                        <th style="width:200px" class="font-weight-medium">produto</th>
                        <th style="width:300px" class="font-weight-medium">status</th>
                        <th style="width:400px" class="font-weight-medium">sku</th>
                        <th style="width:500px" class="font-weight-medium">preço</th>
                        <th style="width:600px" class="font-weight-medium">estoque</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

Bootstrap 4 中具有实际列宽的表格

Tables in Bootstrap 4 with real width of columns

html

bootstrap-4

css-tables