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

Question

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

表Header行

这是表 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

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

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

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

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

Answer 2

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

thead th {
  font-weight: normal;
}

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

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


.itemtitle {
  font-weight: normal;
}