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和.table-bordered外，还可以使用css属性。

<style>

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

</style>

注意：！必须具有重要意义，因为如果没有边框，边框将不会更改其颜色。

Answer 4

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

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

.table-bordered td：为body table创建边框

我必须使用＆＃39;！important＆＃39;，因为没有它，边框就不会改变。

Answer 5

Bootstrap具有自己专用的彩色边框。

只需对表td使用class="border border-dark"，即可突出显示它。

引导程序中的其他预定义颜色也适用于border-*，请使用一些帮助here。

Answer 6

这是最好的方式

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

在bootstrap中更改border-style属性。

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

6 个答案: