jQuery 使用引导程序更改表格标题颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23928526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change table header color using bootstrap
提问by Jean Tehhe
I have a MVC5 application which uses bootstrap. The table column name is in black on white background and I want to change it to a blue background and the column name will be in white, how could I do that? I tried to play with the CSS classes without success...
我有一个使用引导程序的 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>
回答by DavidG
In your CSS
在你的 CSS
th {
background-color: blue;
color: white;
}
回答by Philip Bijker
You could simply apply one of the bootstrap contextual background colorsto the header row. In this case (blue background, white text): primary.
您可以简单地将其中一种引导程序上下文背景颜色应用于标题行。在这种情况下（蓝色背景，白色文本）：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>回答by Rubyist
Here is another way to separate your table header and table body:
这是分隔表格标题和表格正文的另一种方法：
thead th {
background-color: #006DCC;
color: white;
}
tbody td {
background-color: #EEEEEE;
}
Have a look at this example for separation of head and body of table. JsFiddleLink
看一下这个表头和表体分离的例子。JsFiddleLink
回答by Kisspa
//use css
.blue {
background-color:blue !important;
}
.blue th {
color:white !important;
}
//html
<table class="table blue">.....</table>
回答by user3684523
Try This:
尝试这个：
table.table tr th{background-color:blue !important; font-color:white !important;}
hope this helps..
希望这可以帮助..
