Bootstrap 4 中具有实际列宽的表格
Tables in Bootstrap 4 with real width of columns
我正在尝试在 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>
我做错了什么?
您需要放置正确的内联样式标签
<th style="width:500px;">
示例代码似乎确实有效
<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 中做类似的事情,设置 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>
我做错了什么?
您需要放置正确的内联样式标签
<th style="width:500px;">
示例代码似乎确实有效
<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>