web-dev-qa-db-fra.com

Comment puis-je avoir deux lignes dans ma table qui s'étendent sur plusieurs colonnes, tout en étant compatible avec le bootstrap?

J'utilise bootstrap avec mon application Web. J'essaie d'obtenir une mise en page de conception de table tout en étant en mesure d'utiliser _ table-striped classe. Actuellement, j'utilise les éléments suivants:

<table>
  <thead>
    <th>ID</th>
    <th>Name</th>
    <th>Department</th>
    <th>Started</th>
  </thead>
  <tbody>
    <tr>
      <td>6</td>
      <td>
         <div>John Doe</div>
         <div>12 Sales Total; 4 March, 3 April, 12 July, 14 August</div>
      </td>
      <td>Sales</td>
      <td>Feb. 12th 2010</td>
    </tr>
  </tbody>
</table>

Cependant, je veux le 12 Sales Total; 4 March, 3 April, 12 July, 14 August du tableau à apparaître ci-dessous John Doe Sales Feb. 12th 2010 et pas encapsuler dans la colonne dans laquelle il se trouve maintenant. Si j'utilise deux <tr> éléments pour que la mise en page fonctionne, puis les table-striped ne fonctionne plus correctement.

Modifier:

Voici donc la configuration actuelle. Cela obtient ce que je veux, sauf pour le problème où le texte sur la div ne s'étend pas sur les autres colonnes et s'enroule simplement dans la colonne dans laquelle il se trouve actuellement. http://jsfiddle.net/AkT6R/

J'ai déjà essayé quelque chose qui a été mentionné dans une réponse soumise par @Bryce, mais ce n'est pas compatible avec Bootstrap il semble. http://jsfiddle.net/AkT6R/1 /

htmltwitter-bootstraphtml-table
18
daveomcd

Ainsi. Vous avez besoin de rowpan plus colspan:

<table border=1>
  <thead>
    <th>ID</th>
    <th>Name</th>
    <th>Department</th>
    <th>Started</th>
  </thead>
  <tbody>
    <tr>
      <td rowspan=2>6</td>
      <td>
         <div>John Doe</div>
      </td>
      <td>Sales</td>
      <td>Feb. 12th 2010</td>
    </tr>
    <tr>
        <td colspan=3>
         <div>12 Sales Total; 4 March, 3 April, 12 July, 14 August</div>
        </td>
    </tr>
  </tbody>
</table>

Voyez-le en action sur http://jsfiddle.net/brycenesbitt/QJ4m5/2/

Ensuite, pour votre problème CSS. Faites un clic droit et "Inspecter l'élément" dans Chrome. Votre couleur de fond provient de bootstrap.min.css. Cela applique une couleur aux lignes paires et impaires:

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th
{
background-color: #f9f9f9;
}

Jouez-le de manière appropriée pour vos rangées doubles:

.table-striped>tbody>tr:nth-child(4n+1)>td,
.table-striped>tbody>tr:nth-child(4n+2)>td
{    background-color: #ff10ff;
}
.table-striped>tbody>tr:nth-child(4n+3)>td,
.table-striped>tbody>tr:nth-child(4n+4)>td
{    background-color: #00ffff;
}

Terminé.

34
Bryce

Utilisez l'attribut de balise colspan.

<td colspan="2">

ou

<td colspan="4">

Référence

2
cssyphus