web-dev-qa-db-ja.com

Bootstrap逆表とtheadが正しくスタイル設定されていない

Bootstrapベースのプロジェクトで作業しているときに、スタイル設定の一部がユーザーエージェントスタイルシート（ChromeおよびFirefox）でオーバーライドされているという奇妙な問題に出会いました。 この関連の問題 、これは<!DOCTYPE html>最初に省略したタグ。しかし、今では.table-inverse、.thead-inverse、または.thead-defaultclassesでテーブルヘッダーをシェーディングします。私が理解している限り、必要なすべての行、コンテナなどを適切に配置しています。

シェーディングが機能しないのはなぜですか？

.navbar {
  border-radius: 0px
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<h2 class="display-1">Bootstrap 4 Inverse Table</h2>

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <table class="table table-inverse">
        <thead>
          <tr>
            <th>#</th>
            <th>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>
    </div>
  </div>
</div>

JSFiddleで表示

twitter-bootstraphtml-tablecss-tables
14
Bradley Parker

bootstrap-X.X-flex.cssも追加する必要があります。

bootstrap-X.X.css
bootstrap-X.X-flex.css
bootstrap.js

X.Xはバージョン番号です

[〜＃〜] or [〜＃〜]

このCDNを使用します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
13
Pmpr

私のような人がこのスレッドを見つけたが、Bootstrap 4.0.0-beta.2以降、table-inverseおよびthead-inverseは、バージョンリリースごとに-darkに置き換えられましたリンクされている情報 ここ

20
superbeck

ヘッダーに<td>の代わりに<th>を使用していることを確認してください。

16
Edgar Diaz

簡単です。フィドルでリンクしているCSSシートには、.table-inverseスタイリング。

2
Eric Foster

古いバージョンのbootstrapのみです。クラスthead-inverseが利用できないため、このデザインをデザインに追加することができますcssこの背後にある理由は、thead-inverseはbootstrap.cssの最近のバージョンでのみ利用可能だからです。

.thead-inverse th {
            color: #fff;
            background-color: #373a3c;
        }
2
gdmanandamohon