Изменение цвета заголовка таблицы с помощью bootstrap

У меня есть приложение MVC5, которое использует bootstrap. Имя столбца таблицы черным цветом на белом фоне и я хочу изменить его на синий фон и колонки имя будет белым, как я мог это сделать? Я пытался играть с классами 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>
7
css css3 jquery jquery-ui twitter-bootstrap

5 ответов

в вашем CSS

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

вы можете просто применить один из bootstrap контекстные цвета фона в строке заголовка. В этом случае (синий фон, белый текст): дошкольное.

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

вот еще один способ разделить заголовок таблицы и тело таблицы:

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

tbody td {
    background-color: #EEEEEE;
}

взгляните на этот пример для разделения головы и тела таблицы. JsFiddleLink

2

Попробуйте Это:

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

надеюсь, что это помогает..

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

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