Comment puis-je mettre un tableau HTML colonne avec Bootstrap

Je suis en utilisant bootstrap et ont créé un tableau dans lequel j'ai besoin d'colonnes regroupées. Est-il bootstrap options que je peux utiliser? Je suis prêt à écrire mon propre CSS pour le faire, mais je préfère ne pas si il y a une construite dans le bootstrap façon de le faire.

Par exemple, dans le tableau ci-dessous je voudrais que la Current colonnes, avec une couleur d'arrière-plan et la New colonnes pour en avoir une autre.

http://jsfiddle.net/75v7W/

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

Mise à JOUR: j'ai réalisé quelque chose de ce que je suis à la recherche de l'aide colgroup et, hélas, CSS personnalisé (mais pas beaucoup) : http://jsfiddle.net/75v7W/4/

  • Ce n'est certainement pas une partie de Bootstrap...
  • Pas possible avec juste bootstrap, mais cela fonctionne en supposant que vous ne voulez pas ajouter de balisage HTML: jsfiddle.net/75v7W/2
  • Vous n'avez pas besoin de la :first-child déclaration sur l' tr que l'on est td et on est th. C'est la façon que j'avais d'aller à ce sujet aussi, btw.
  • Je pense qu'après je l'ai posté mais merci pour le poster 🙂
  • Vous êtes plus que bienvenu, mon bon monsieur.
  • Le colgroup balise acheter mon quoi que ce soit?

InformationsquelleAutor wilsjd | 2013-06-06
  1. 23

    J'ai réalisé quelque chose de ce que je suis à la recherche de l'aide colgroup et, hélas, CSS personnalisé (mais pas beaucoup): http://jsfiddle.net/75v7W/4/

    Remarque: Pour les background-colors ci-dessous, je l'ai tiré par le succès, erreur, etc. de les couleurs par défaut dans le bootstrap.css. Si vous avez personnalisé votre fichier d'amorçage.css, ces couleurs ne peuvent pas travailler 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>
    • Cela ne marchera pas pour la table-striped depuis tous les atn(impair) tr obtient substituée avec sa propre couleur d'arrière-plan, et l'élément tr a plus de spécificité que le col de l'élément. Vous aurez besoin de mettre une classe dans chaque <td>
    InformationsquelleAutor wilsjd
  2. 10

    Il est préférable, si il est possible d'utiliser le bootstrap construire-dans des classes css.

    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-primary
    • bg-success
    • bg-info
    • bg-warning
    • bg-danger

    Classes Css pour coloriser vos colonnes, cellules, etc.

    InformationsquelleAutor Dániel Kis