web-dev-qa-db-fra.com

Comment changer la couleur de la bordure de la table bootstrap en utilisant inline css

Bien que inline css ne soit pas recommandé, je souhaite simplement le tester dans un cas particulier et souhaite par conséquent remplacer la couleur de bordure par défaut d'un bootstrap table par le blanc. Mais ce qui suit ne fonctionne pas. Il affiche toujours la couleur de bordure par défaut d'une table d'amorçage. Comment peut-il être réalisé ou quelles sont les autres alternatives sans en utilisant javascript ou sans déconner avec le bootstrap css par défaut?

<table class="table table-bordered" style="border-color:white;">
...
...
</table>
htmlcsstwitter-bootstrap
6
nam

Utiliser uniquement style="border-color:white;" définit le bord de la table sur blanc, mais ils sont écrasés par les styles th et td.

Vous devez également le définir pour chaque th et td. Si vous utilisez uniquement les fichiers CSS en ligne, cela prendra beaucoup de temps. Le moyen le plus simple serait d'inclure les styles dans css et d'utiliser le signe enfant direct (>) pour indiquer la préférence de style. Comme ça.

table.table-bordered > thead > tr > th{
  border:1px solid blue;
}

Voici un extrait de travail:

table.table-bordered{
    border:1px solid blue;
    margin-top:20px;
  }
table.table-bordered > thead > tr > th{
    border:1px solid blue;
}
table.table-bordered > tbody > tr > td{
    border:1px solid blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

15
ab29007

table.table-bordered{
    border:1px solid blue;
    margin-top:20px;
  }
table.table-bordered > thead > tr > th{
    border:1px solid blue;
}
table.table-bordered > tbody > tr > td{
    border:1px solid blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

0
hani abukhurma

Le moyen le plus simple est d’ajouter votre propre fichier CSS, avec les modifications personnalisées, après l’amorçage CSS par défaut. Vous n'êtes pas sûr de la version que vous utilisez, mais voici comment appliquer une bordure dans 3.3.7 et vous devez écraser cette règle:

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid red; //your desired color
}

Démo: http://www.bootply.com/T5xU5ismja

0
sinisake

Si vous souhaitez uniquement cibler l'en-tête de la table, utilisez le code suivant: -

http://www.bootply.com/oAYBUqQet3

.table-bordered > tbody > tr > th {
     border: 1px solid blue;
}
0
Tony Hensler

Ce sont probablement les éléments à l'intérieur qui ont la bordure, auquel cas le style en ligne doit être appliqué à l'élément qui a la bordure, comme le td

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

<table class="table table-bordered">
  <tr>
    <td style="border-color:white;">asdf</td>
  </tr>
</table>

0
Michael Coker