Question

我正在尝试更改Bootstrap表的边框颜色。

HTML

<table class="table">
  <thead>
    <tr>
      <td>Parent</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mama</td>
    </tr>
  </tbody>
</table>

CSS 我试过了

table > tr{
  border-top: black;
}

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

FIDDLE
https://jsfiddle.net/o9b17p2d/43/

如小提琴中所见我想改变Parent＆amp ;;的线条颜色。妈妈。

Answer 1

您输入了错误的代码。请尝试此

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

Answer 2

在你的css中试试这个。

thead{
  border-bottom: 2px solid #6c5ce7;
}

https://jsfiddle.net/o9b17p2d/45/

我希望它会有所帮助

Answer 3

这样您就不会影响页面/网站中的所有其他表格。最简单的方法是给元素一个id，然后使用id在CSS中定位它。

#no-top-border-td {
  border-top: none
}

<td id="no-top-border-td">Mama</td>

或者您可以将其作为样式添加到实际元素

<td style="border-top: none" />

当应用CSS时，这两者都具有高优先级。

Answer 4

您还可以在thead中使用border-bottom属性。在css中添加此代码

 .table thead tr td{
  border-bottom:1px solid red;
}

Answer 5

您在table > tr > td {和table > tr {中使用了错误的选择器因为thead是表格的直接子项而不是tr。

所以，改变如下：

table > thead > tr > td {
  border-bottom: 1px solid red !important;
}

＆＃13;

table > thead > tr > td {
  border-bottom: 1px solid red !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<table class="table">
    <thead>
        <tr>
          <td>Parent</td>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>Mama</td>
        </tr>
    </tbody>
</table>

＆＃13;

改变bootstrap 4 beta表格边框的颜色？

5 个答案: