Change table header color using bootstrap

Question

I have an MVC5 application that uses bootstrap. The table column name is in black on a white background, and I want to change it to a blue background and the column name will be white, how can I do this? I tried playing with CSS classes without success ...

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

Answer 1

In your CSS

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

Answer 2

Here is another way to separate the table header and table body:

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

Take a look at this example to separate the head and body of the table. Jsfiddlelink

Answer 3

 //use css .blue { background-color:blue !important; } .blue th { color:white !important; } //html <table class="table blue">.....</table> 

Answer 4

Try the following:

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

hope this helps.

Answer 5

You can simply apply one of the loading contextual background colors to the title bar. In this case (blue background, white text): main.

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