增加引导程序中的表格边框大小

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，请使用线条样式。我为桌子和第一个 td 做了它。

<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%">{{$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>

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;
}