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

如何解决在引导程序中增加表格边框大小

你好，我想增加这张桌子的边框尺寸，我尝试了很多东西，但没有任何反应，如何让头桌变暗？

有什么办法可以解决这个问题吗？

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

解决方法

要使表格标题变暗，这来自 Bootstrap 5 文档，“类似于表格和深色表格，使用修饰符类 .table-light 或 .table-dark 使标题显示为浅灰色或深灰色。” （来源：https://getbootstrap.com/docs/5.0/content/tables/）

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

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

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

,

如果您不想使用 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>