如何最好地改变Bootstrap表格的边框颜色？

Question

如何最好地改变Bootstrap表格的边框颜色？

htmlcsstwitter-bootstrap

4

我使用的是Bootstrap表格类。默认的边框颜色应该是灰色/银色 - 我想。

但我希望将边框颜色更改为红色，但我无法实现它。

这是我的代码 enter image description here

CSS

.table {
border: red solid 1px !important;
}

HTML：表格

<table class="table table-bordered piechart-key ">

    <thead >
        <th></th>
        <th></th>
        <th> Item Summary</th>
        <th> Item List</th>

    </thead>
    <tbody>
        <tr>
            <td width="30"></td>
            <td width="200">
                &gt; 50% of students answered these items correctly
            </td>
            <td width="50">5/25</td>
            <td width="100">5,10,15,19,23</td>
        </tr>
        <tr>
            <td width="30"></td>
            <td width="200">50% up to 75% of students answered these items correctly</td>
            <td width="50">8/25</td>
            <td width="100">3,7,11,13,14,16,21,22</td>
        </tr>
        <tr>
            <td width="30"></td>
            <td width="200">&ge; 75% of students answered these items correctly</td>
            <td width="50">12/25</td>
            <td width="100">1,2,4,6,8,9,12,17,18,20,24,25</td>
        </tr>
    </tbody>
</table>

这是我的JSFiddle

如何最佳地更改Bootstrap表格的边框颜色？

- code-8

1

只需稍微具体化您的CSS选择器，您就可以很好地完成您所要做的！ - Jay

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mauricio Moraes · Accepted Answer

尝试将其应用于单元格：

.table td{
    border: red solid 1px !important;
}

对于页眉:

.table th{
    border: red solid 1px !important;
}

http://jsfiddle.net/w0b73dwt/7/

编辑

注：我使用了!important指令，因为我没有找到其他简单的方法来完成。当然，我们都知道这是一种不好的CSS实践，但在某些情况下，我们将不得不冒险。 另一个方法是找出Bootstrap如何声明其样式，并为td和th创建具有更高优先级的CSS选择器。在这种情况下，在第一次Bootstrap更新时可能会出现问题。