在bootstrap中增加表边框大小

Question

你好，我想增加这个表的边框大小，我尝试了很多事情，但没有发生，如何使一个头表是黑暗的?

有办法解决这个问题吗?

<div class="col-xs-12">
<br/>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center" width="5%">م</th>
<th class="text-center" width="40%">{{$receipt_details->table_product_label}}</th>
<th class="text-center" width="15%">{{$receipt_details->table_qty_label}}</th>
<th class="text-center" width="20%">{{$receipt_details->table_unit_price_label}}</th>
<th class="text-center" width="20%">{{$receipt_details->table_subtotal_label}}</th>
</tr>
</thead>
</table>
</div>

Answer 1

如果你不想使用CSS，可以使用内联样式。我这样做是为了table和第一个td。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<table class="table table-bordered" style="border-width:4px">
<thead>
<tr>
<th class="text-center" style="border-width:4px" width="5%">م</th>
<th class="text-center" width="40%">Front – Multipurpose Responsive Template</th>
<th class="text-center" width="15%">2</th>
<th class="text-center" width="20%">$49.00</th>
<th class="text-center" width="20%">$98.00</th>
</tr>
</thead>
</table>

Answer 2

要使表头变暗，这来自Bootstrap 5.3文档，"类似于表和暗表，使用.table-light或.table-dark修饰符类使<thead>显示浅灰色或深灰色。">

<table class="table">
<thead class="table-dark">
...
</thead>
<tbody>
...
</tbody>
</table>

至于边框宽度，我建议为td和th元素设置自定义样式，如下所示:

td, th {
border-width: 2px;
}