Ce site est entièrement responsive. Néanmoins, certains styles peuvent être mieux appréciés sur un écran plus grand.

Documentation

Découvrez le fonctionnement du framework Slim à travers la documenation. Tous les composants y sont abordés, et illustrés des mises en situation.

Tableaux

Tableau (gestion des largeurs)

Vous pouvez gérer la largeur de votre tableau avec la classe .width-xx, les largeurs disponibles sont identiques à celles des grilles. Pour gérer la largeur des colonnes, même système de class, à insérer dans la th de thead.

Gateaux Dificulté Temps fabrication
Tarte à l'abricot Facile 20 min
Tarte au citron Moyen 45 min
Cake nature Facile 15 min
Temps total 1h20
<table class="width-100">	
	<thead>
		<tr>
			<th class="width-50">Gateaux</th>
			<th class="width-25">Dificulté</th>
			<th class="width-25">Temps de fabrication</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tarte à l'abricot</td>
			<td>Facilelt</td>
			<td>20 min</td>
		</tr>
		<tr>
			<td>Tarte au citron</td>
			<td>Moyen</td>
			<td>45 min</td>
		</tr>
		<tr>
			<td>Cake Nature</td>
			<td>Facile</td>
			<td>15 min</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>...</td>
			<td>...</td>
			<td>...</td>
		</tr>
	</tfoot>
</table>

Tableau classic

Il est possible de laisser les colonnes du tableau se gérer toutes seules.

Gateaux Dificulté Temps fabrication
Tarte à l'abricot Facile 20 min
Tarte au citron Moyen 45 min
Cake nature Facile 15 min
<table class="width-100">	
	<thead>
		<tr>
			<th>Gateaux</th>
			<th>Dificulté</th>
			<th>Temps de fabrication</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>...</td>
		</tr>
	</tbody>
</table>

Tableau à bords

Pour faire un tableau à bords, utilisez la class .table-bords.

Gateaux Dificulté Temps fabrication
Tarte à l'abricot Facile 20 min
Tarte au citron Moyen 45 min
Cake nature Facile 15 min
Temps total 1h20
<table class="width-100 table-bords">	
	...
</table>

Tableau sans bords

Un tableau simple sans bords avec .table-simple.

Gateaux Dificulté Temps fabrication
Tarte à l'abricot Facile 20 min
Tarte au citron Moyen 45 min
Cake nature Facile 15 min
Temps total 1h20
<table class="width-100 table-simple">	
	...
</table>

Tableau avec à bande

L'affichage d'un ligne sur deux du tableau avec un fond gris se fait avec la class table-bande.

Gateaux Dificulté Temps fabrication
Tarte à l'abricot Facile 20 min
Tarte au citron Moyen 45 min
Cake nature Facile 15 min
<table class="width-100 table-bande">	
	...
</table>

Tableau avec hover

Ajoutez un hover à vos tabeaux avec la class .table-hover.

Gateaux Dificulté Temps fabrication
Tarte à l'abricot Facile 20 min
Tarte au citron Moyen 45 min
Cake nature Facile 15 min
<table class="width-100 table-hover">	
	...
</table>