web-dev-qa-db-ja.com

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>
jquerycsscss3jquery-uitwitter-bootstrap
8
Jean Tehhe

CSSで

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

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>
5
Philip Bijker

テーブルヘッダーとテーブルボディを分離する別の方法を次に示します。

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

tbody td {
    background-color: #EEEEEE;
}

テーブルのヘッドとボディの分離については、この例をご覧ください。 JsFiddleLink

3
Rubyist

これを試して：

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

お役に立てれば..

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

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