Bootstrap : comment paramétrer une largeur fixe pour <td>?

Un code CSS classique ne suffit pas pour modifier la largeur des colonnes de grille. Voici comment faire.

Si vous utilisez le framework CSS Bootstrap, le système de grille permet de placer vos éléments dans la page. Il faut connaître les mécanismes permettant de modifier ce système, car un code CSS classique ne suffit pas pour, par exemple, modifier la largeur des colonnes de la grille. Voici un exemple de colonnes pour lesquelles on veut fixer la largeur :

<tr class="something">
 <td>A</td>
 <td>B</td>
 <td>C</td>
</tr>

Si vous développez une application utilisant la version 2 de Bootstrap, les classes "span*" permettent de spécifier le nombre de colonnes auquel correspond la largeur de votre colonne. Une colonne ayant la classe "span2" occupera 2 colonnes en largeur :

<tr class="something">
 <td class="span2">A</td>
 <td class="span5">B</td>
 <td class="span3">C</td>
</tr>

À partir de la version 3 de Bootstrap, la nouvelle classe "col-md-*" remplace la classe "span*" pour déterminer la largeur d'une colonne.

<tr class="something">
 <td class="col-md-2">A</td>
 <td class="col-md-5">B</td>
 <td class="col-md-3">C</td>
</tr>

Si votre table a des en-têtes avec la balise <th>, vous devez alors utiliser ces classes sur les <th> au lieu des <td>. Le fait de fixer la largeur sur les en-têtes permet de le faire pour toutes les lignes du tableau, sans devoir réécrire les classes à chaque ligne.

Bootstrap