使用引导程序更改表头颜色答案

【问题标题】：Change table header color using bootstrap使用引导程序更改表头颜色
【发布时间】：2014-07-18 16:11:30
【问题描述】：

我有一个使用引导程序的 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>

【问题讨论】：

标签： jquery css jquery-ui twitter-bootstrap

【解决方案1】：

在你的 CSS 中

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

【讨论】：

谢谢大卫，CSS 在哪里？在 site.css 文件中？我应该如何在代码中引用它？
将其添加到 site.css，模板应该已经引用了它，因此您无需执行任何其他操作。
非常感谢大卫，投了赞成票！它可以工作，但是我有一些问题，当我单击添加行并将新行附加到表格时它也有相同的蓝色和白色，我该如何避免它？这是在点击时添加行的代码...var html = ' @Html.TextBox("Name") @Html.CheckBox("checkBox1") th> @Html.CheckBox("checkBox2") @Html.CheckBox("checkBox3") ';

【解决方案2】：

您可以简单地将引导程序contextual background colors 之一应用于标题行。在这种情况下（蓝色背景，白色文本）：主要。

<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>

【讨论】：

这是不太“hacky”的方法，因为它不使用自定义 CSS，而是使用 Boostrap 的 CSS 类。但它只允许您从已知的颜色类别danger、info、success、primary 和warning 中进行选择，这可能有点有限。但也许这根本不是正确的 CSS 类？只是第二个想法！
还有 ´table-*` 颜色类别。 (BS 4.0.0)

【解决方案3】：

这是分隔表头和表体的另一种方法：

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

tbody td {
    background-color: #EEEEEE;
}

看看这个例子来分离表格的头部和主体。 JsFiddleLink

【讨论】：

【解决方案4】：

试试这个：

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

希望这会有所帮助..

【讨论】：

谢谢，但我应该把它放在哪里？
你有一个 style.css 或你正在使用的任何 css 文件，你可以在它的底部写..
没有font-color这样的css属性
此外，应不惜一切代价避免使用 !important，仅将其用作最后的手段。

【解决方案5】：

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

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

【讨论】：

这将使整个表格背景变为蓝色，并且不会按照 OP 的要求更改文本颜色。

【解决方案6】：

有一个引导函数来改变表头的颜色，名为 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>

【讨论】：