使用Bootstrap更改表头颜色

Question

我有一个使用Bootstrap的MVC5应用程序。表格列名是黑色的，白色背景，我想将其更改为蓝色背景，并且列名将是白色的，我该如何实现？我尝试了一些CSS类，但没有成功...

<input type="button" value="Add" onclick="addRow()" class="data-button" id="add-row" />


    <table class="table" >
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.checkBox1)
            </th>
            <th></th>
        </tr>

- Jean Tehhe

Answer 1

在你的CSS中

th {
    background-color: blue;
    color: white;
} 

- DavidG

---

谢谢David，CSS文件的哪里？在site.css文件中吗？我在代码中应该如何引用它？ - Jean Tehhe

将其添加到site.css中，模板应该已经引用它，所以您不需要做其他任何事情。 - DavidG

非常感谢你，大卫！赞一个！这个代码有效，但我遇到了一个问题，就是当我点击添加行时，我将新的行追加到表格中，但它也具有相同的蓝色和白色背景，我该如何避免这种情况？以下是点击时添加行的代码：var html = '<tr><th>@Html.TextBox("Name")</th><th>@Html.CheckBox("checkBox1")</th><th>@Html.CheckBox("checkBox2")</th><th>@Html.CheckBox("checkBox3")</th><th></th></tr>'; - Jean Tehhe

Answer 2

你可以简单地将 Bootstrap 的上下文背景颜色之一应用到标题行中。在这种情况下（蓝色背景，白色文本）：primary。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<table class="table" >
  <tr class="bg-primary">
    <th>
        Firstname
    </th>
    <th>
        Surname
    </th>
    <th></th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
    <tr>
      <td>Jane</td>
      <td>Roe</td>
    </tr>
</table>

- Philip Bijker

---

这是一种不太“hacky”的方法，因为它不使用自定义CSS，而是使用Boostrap的CSS类。但是它只允许您从已知的颜色类danger、info、success、primary和warning中选择，这可能有点受限。但是也许这根本不是正确的CSS类？这只是一个第二个想法！ - Roland

还有 ´table-*` 颜色类（BS 4.0.0）。 - Roland

Answer 3

这里有另一种将表头和表格主体分开的方法：

thead th {
    background-color: #006DCC;
    color: white;
}

tbody td {
    background-color: #EEEEEE;
}

请看这个表头和表身分离的示例。 JsFiddleLink

- Rubyist

Answer 4

//use css
.blue {
    background-color:blue !important;
}
.blue th {
    color:white !important;
}

//html
<table class="table blue">.....</table>

- Kisspa

---

这将使整个表格背景变为蓝色，不像OP请求的那样改变文本颜色。 - DavidG

Answer 5

尝试这个：

table.table tr th{background-color:blue !important; font-color:white !important;}

希望这有所帮助。

- user3684523

---

谢谢，但我应该把它放在哪里？ - Jean Tehhe

如果您有一个名为style.css或任何CSS文件，您可以在其底部编写。 - user3684523

没有名为"font-color"的CSS属性。 - DavidG

此外，应尽量避免使用!important，并仅在万不得已时使用。 - DavidG

Answer 6

有一个Bootstrap函数可以改变表头的颜色，称为thead-dark（用于暗色背景）和thead-light（用于浅色背景）。使用此函数后，您的代码将如下所示。

<table class="table">
    <tr class="thead-danger">
        <!-- here I used dark table headre -->
        <th>
            @Html.DisplayNameFor(model => model.name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.checkBox1)
        </th>
        <th></th>
    </tr>

- AhsanRao

Answer 7

你不能为 tr 或 thead 标签设置颜色。你应该通过样式或以下方式更改 th 标签的颜色：

.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: red; /* Choose your own color here */
}```

- mahsa k