我怎样才能摆脱这条线？或者至少格式化它？

Question

我一定是遗漏了一些非常小的东西。我有一个 html table 和 Bootstrap5 css。我无法正确设置格式。我怎样才能摆脱这条黑线或格式化它和黑色文本以使其不那么粗体？

Table Header Row

这是 table header 代码：

<table id="submissionTable" class="table table-bordered">
        <thead>
            <tr>
                <th class="col-6 text-center">Item Description</th>
                <th class="col-3 text-center">Quantity Used</th>
                <th class="col-2 text-center">Sold</th>
                <th class="col-1 text-center"></th>
            </tr>
        </thead>

我在我的 <head> 中使用 bootstrap.min.js 和我自己的 custom.js。

这是我的习惯css

tbody, td, tfoot, th, thead, tr {
border-style: none;

}

Answer 1

我无法复制照片中的黑线，但要更改文字粗细和样式，您可以这样做：

thead th {
  font-weight: normal;
}

最好给标题自己 class 并在 CSS 中引用它，如下所示：

<th class="col-1 text-center itemtitle">Item Description</th>


.itemtitle {
  font-weight: normal;
}

Answer 2

我在尝试添加代码段时找到了答案。代码段只允许 30000 行文本，所以我减少了 bootstrap.css 实际需要的内容，并通过消除过程结束了这一行：

.table > :not(:first-child) {
    border-top: 2px solid currentColor
}

改成了这个，现在这条线不见了

.table > :not(:first-child) {
    border-top: none
}

我怎样才能摆脱这条线？或者至少格式化它？

How can I get rid of this line? Or atleast format it?

html

html-table

bootstrap-5