CSSを変更してブートストラップの<th>を変更する方法

テーブルヘッダーのいくつかを中央に、もう一方を左側に揃えたいとします。私は、ブートストラップにある関数をオーバーライドするために、vaioursメソッドを試しました。しかし、私は成功することができませんでした。試したことがあります：CSSを変更してブートストラップの<th>を変更する方法

私はcolumn-centerというクラスを作成しました。 HTMLは次のようになります。

<thead> 
    <tr> 
    <th>Roll#</th> 
    <th style="width: 20%">First Name</th> 
    <th style="width: 20%">Middle Name</th> 
    <th style="width: 20%">Last Name</th> 
    <th class="column-center" style="width: 10%">Class</th> 
    <th class="column-center" style="width: 10%">Division</th> 
    </tr> 
</thead>

私が試したCSSは以下のとおりです。

.column-center > thead > tr > th{ 
text-align: center !important; 
} 
.column-center > thead > tr > th, .column-center > tbody > tr > th, .column-center > tfoot > tr > th, .column-center > thead > tr > td, .column-center > tbody > tr > td, .column-center > tfoot > tr > td{ 
text-align: center !important; 
} 
.column-center > tr > th{ 
text-align: center !important; 
} 
.column-center .table > thead > tr > th{ 
text-align: center !important; 
} 
table > thead > tr > th .column-center{ 
text-align: center !important; 
} 
table.table.table-striped tr.column-center td{ 
text-align: center !important; 
} 
.column-center > thead > tr > th, .column-center > tbody > tr > th, .column-center > tfoot > tr > th, .column-center > thead > tr > td, .column-center > tbody > tr > td, .column-center > tfoot > tr > td{ 
text-align: center; 
} 
.table-striped > tbody > tr:nth-child(odd) > th.column-center { 
text-align: center !important; 
} 
.table-striped > tbody > tr:nth-child(odd) > td.column-center { 
text-align: center; 
} 
.table tbody tr th{ 
text-align: center; 
}

出典

2016-08-10 Shehzi

は、あなたがあなたのカスタムCSSをAFTER含めているよろしいブートストラップスタイルシート怒鳴るカスタマイズされたスタイルシートを追加することを忘れないでくださいブートストラップ？彼らのCSSを見ると、単純な 'th {text-align：center}'がそれを行うべきです。 – Leeish

はい。私は別のスタイルをオーバーライドするために同じCSSを使用しているので確信しています。私がth {text-align：center}を行うと、thプロパティ全体が変更されます。私は2つのヘッダーを中央に配置したい。残りの部分は左。 – Shehzi

ブラウザのデベロッパーツールを使用して、thをクリックして、スタイリングがどこから得られているかを確認できますか？ – Leeish

私は問題を解決しました。私はsnippeを追加しましたここではのhtmlにクラスを追加（center-align）し、カスタムスタイルシートにスタイル（text-align）を与えました。 HTMLのheadセクションで

は

<head> 
    <link href="../bootstrap.min.css" rel="stylesheet"/> 
    <link href="../custom-style.css" rel="stylesheet"/> 
</head> 
<body></body>

.center-align{ 
 
    text-align:center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <h2>Condensed Table</h2> 
 
    <table class="table table-condensed"> 
 
    <thead> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th class="center-align">Email</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>John</td> 
 
     <td>Doe</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Mary</td> 
 
     <td>Moe</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
     <tr> 
 
     <td>July</td> 
 
     <td>Dooley</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

出典

2016-08-10 19:29:22

'.text-center'クラスは、アラインメントクラスとしてBootstrapにネイティブです。ソリューションは機能しますが、既存のクラスの複製を作成しています。参照してください：http://getbootstrap.com/css/#type-alignment –

もちろん、もちろんですが、ここで私はあなたのカスタムスタイルでブートストラップスタイルをオーバーライドする簡単な方法について教えています。ちょうど "center-align"をサンプルクラス。このクラスには、必要に応じてスタイルを追加することができます（テキストアライメントではなく）、ブートストラップスタイルをオーバーライドします。重要なことは、ブートストラップとカスタムスタイルシートを適切にリンクする必要があることです。ありがとう、 –

はい。クラス名と衝突がありました。 '.center-align { text-align：center; }は私のために働いていました。皆さんありがとうございました。 – Shehzi

はちょうどあなたが中央

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<table class="table table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th class="text-center">First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Username</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row">1</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">2</th> 
 
    <td>Jacob</td> 
 
    <td>Thornton</td> 
 
    <td>@fat</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">3</th> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>@twitter</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

に整列するものには.text-センタークラスを追加

出典

2016-08-10 18:59:34

これは動作します。しかし、私はCSSでそれをやりたかったのです。解決策を得ました。クラス名と衝突がありました。 – Shehzi

CSSを変更してブートストラップの<th>を変更する方法

答えて

関連する問題