web-dev-qa-db-fra.com

Bootstrap table inverse et la tête ne stylent pas correctement

En travaillant sur un projet basé sur Bootstrap, je suis tombé sur un problème étrange où une partie du style était remplacée par la feuille de style de l'agent utilisateur (dans Chrome et Firefox). J'ai trouvé ce problème connexe , qui a été résolu en incluant le <!DOCTYPE html> tag que j'avais initialement omis. Mais maintenant, je ne peux pas obtenir le .table-inverse, .thead-inverse, ou .thead-defaultclasses pour ombrer mes en-têtes de table. Autant que je sache, j'ai toutes les rangées, conteneurs, etc. nécessaires en place.

Pourquoi l'ombrage ne fonctionne-t-il pas?

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

Voir sur JSFiddle

twitter-bootstraphtml-tablecss-tables
14
Bradley Parker

Vous devez ajouter bootstrap-X.X-flex.css aussi.

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

Où X.X est le numéro de version

OU

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

Pour tous ceux qui comme moi trouvent ce fil mais utilisent Bootstrap 4.0.0-beta.2 ou version ultérieure, table-inverse et l'inverse de la tête ont été remplacés par - dark selon la version informations liées ici

20
superbeck

Assurez-vous que vous utilisez <th> à la place <td> dans l'en-tête.

16
Edgar Diaz

Assez facile. La feuille CSS à laquelle vous créez un lien dans votre violon n'inclut pas le .table-inverse coiffant.

2
Eric Foster

Cela se produit pour les anciennes versions de bootstrap uniquement. Parce que la classe thead-inverse n'y est pas disponible. Vous pouvez simplement ajouter cette conception à votre conception css J'espère que cela fonctionnera certainement comme je l'ai fait. La raison derrière cela est thead-inverse n'est disponible que dans les versions récentes de bootstrap.css seulement.

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