Comment mettre en surbrillance une colonne de table HTML avec Bootstrap
j'utilise bootstrap et j'ai créé une table dans laquelle j'ai besoin de colonnes regroupées. Est-il bootstrap options que je peux utiliser? Je suis prêt à écrire mes propres CSS pour le faire, mais je ne préférerais pas s'il y a une façon construite dans bootstrap pour le faire.
Par exemple, dans le tableau ci-dessous je voudrais que la Current colonnes avec un fond de couleur et le New colonnes d'avoir l'autre.
<table>
<thead>
<tr>
<td></td>
<td colspan="2" style="text-align: center;">Current</td>
<td colspan="2" style="text-align: center;">New</td>
</tr>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Fisrt Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Bauer</td>
<td>Jack</td>
<td>Bauer</td>
</tr>
</tbody>
</table>
UPDATE: j'ai réalisé quelque chose de ce que je suis à la recherche de l'aide colgroup et, hélas, CSS personnalisé (bien que pas très bien) : http://jsfiddle.net/75v7W/4/
2 réponses
j'ai réalisé quelque chose de ce que je suis à la recherche de l'aide http://jsfiddle.net/75v7W/4/
Remarque:background-color s ci-dessous, j'ai tiré de la réussite, erreur, etc. de les couleurs par défaut dans le bootstrap.css. Si vous avez personnalisé votre fichier d'amorçage.css, ces couleurs spécifiques peuvent ne pas fonctionner pour vous.
CSS
colgroup col.success {
background-color: #dff0d8;
}
colgroup col.error {
background-color: #f2dede;
}
colgroup col.warning {
background-color: #fcf8e3;
}
colgroup col.info {
background-color: #d9edf7;
}
TABLE
<table class="table table-condensed">
<colgroup>
<col>
<col span="2" class="info">
<col span="2" class="success">
</colgroup>
<thead>
<tr>
<td></td>
<td colspan="2" style="text-align: center;">Current</td>
<td colspan="2" style="text-align: center;">New</td>
</tr>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Fisrt Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Bauer</td>
<td>Jack</td>
<td>Bauer</td>
</tr>
</tbody>
</table>
il est préférable, s'il est possible d'utiliser les classes CSS Bootstrap build-in.
Il est construit de manière à mettre en avant une des colonnes: https://jsfiddle.net/DanielKis/wp6bt229/
HTML:
<table class="table table-condensed">
<colgroup>
<col class="bg-success"></col>
<col span="2" class="bg-info"></col>
<col span="2" class="bg-danger"></col>
</colgroup>
<thead>
<tr>
<td></td>
<td colspan="2" class="text-center bg-primary">Current</td>
<td colspan="2" class="text-center">New</td>
</tr>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Fisrt Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Johnny</td>
<td>English</td>
<td>Bud</td>
<td>Spencer</td>
</tr>
</tbody>
</table>
Vous pouvez utiliser
bg-primarybg-successbg-infobg-warningbg-danger
classes Css pour coloriser vos colonnes, les cellules, etc.