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

【问题标题】：How can I get rid of this line? Or atleast format it?我怎样才能摆脱这条线？或者至少格式化它？
【发布时间】：2022-01-24 12:16:15
【问题描述】：

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

Table Header Row

这是表头代码：

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

}

【问题讨论】：

创建代码sn-p供参考。

标签： html html-table bootstrap-5

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

thead th {
  font-weight: normal;
}

最好给标题赋予自己的类并在 CSS 中像这样引用它：

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


.itemtitle {
  font-weight: normal;
}

【讨论】：

谢谢，字体效果很好。还是得到了黑线。我会继续努力的。