html - 在 Twitter Bootstrap 中更改 .table-bordered 的线条颜色

Question

我正在使用 twitter bootstrap 设计一些表格，并且正在使用.table.table-bordered该类。默认边框颜色为灰色，这对我的所有表格都有好处，除了一张。对于一张桌子，我想将此边框颜色更改为黑色，并尽可能使线条更粗。我用的少。

我已经对其进行了研究，发现了@tableBorder我可以自定义的变量，但是更改它会改变所有表格的颜色。

我尝试给表一个类并将其放入 css 文件中：

.differentTable {
   @tableBorder: black;
}

...但这似乎并没有改变任何东西（不知道为什么）。

任何帮助将不胜感激。

Answer 1

@tableBorder是变量，不是属性。

您可以将其添加到您的 CSS 中：

.differentTable, .differentTable td{
   border-color: black;
}

Answer 2

最好的方法是

.table {
  border: 0.5px solid #000000;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
   border: 0.5px solid #000000;
}

Answer 3

.table-bordered td, .table-bordered th{
    border-color: black !important;
}

.table-bordered th ：为头和脚表创建边框。

.table-bordered td : 为正文表创建边框

我必须使用'！important'，因为没有它边框不会改变。

Answer 4

除了引导类 .table 和 .table-bordered，您还可以使用 css 属性。

<style>

th,td{
border-color: black !important;
border: 2px solid black;
}

</style>

注意： !important 是必须的，因为没有它，边框不会改变颜色。

Answer 5

Bootstrap 有自己的彩色边框。

仅class="border border-dark"用于表 td，您想突出显示它。

bootstrap 中的其他预定义颜色也适用，请在此处border-*使用一些帮助。

Answer 6

这是最好的方法

.table-border,
thead,
tbody,
tr {
  border: 5px dotted #4c4c4c;
}

在引导程序中更改边框样式属性。