Table

Standard

Utiliser la classe wpeo-table sur la balise <table>

<table class="wpeo-table">
  <thead>
    <tr>
      <th data-title="Identifiant">#</th>
      <th data-title="Nom">Nom</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th data-title="Identifiant">1</th>
      <td data-title="Nom">Snow</td>
    </tr>
  </tbody>
	<tfoot>
		<tr>
			<th data-title="Identifiant">#</th>
			<th data-title="Nom">Nom</th>
		</tr>
	</tfoot>
</table>
# Nom Prénom Genre
1 Snow Jon Home
2 Targaryen Daenerys ND
3 Stark Arya Femme
# Nom Prénom Genre

Avancé

Les tableaux flexibles utilisent la propriété CSS Flexbox. Ils sont donc beaucoup plus permissif (multiligne, responsif, changement d’apparence, etc..)
Cependant, il est possible de rencontrer des petits problèmes d’alignements contrairement aux tableaux natifs <table>

Note : Attention, bien que la classe principale soit la même, les tableaux avancés utilisent un HTML totalement différent.

<div class="wpeo-table table-flex table-4">
	<div class="table-row table-header">
		<div class="table-cell">#</div>
		<div class="table-cell">Nom</div>
		<div class="table-cell">Prénom</div>
		<div class="table-cell">Genre</div>
	</div>
	<div class="table-row">
		<div class="table-cell">1</div>
		<div class="table-cell">Snow</div>
		<div class="table-cell">Jon</div>
		<div class="table-cell">Home</div>
	</div>
	<div class="table-row">
	<div class="table-cell">2</div>
	<div class="table-cell">Targaryen</div>
	<div class="table-cell">Daenerys</div>
	<div class="table-cell">ND</div>
	</div>
</div>
#
Nom
Prénom
Genre
1
Snow
Jon
Home
2
Targaryen
Daenerys
ND

Taille générales des cellules

Appliquer cette classe table-{NOMBRE_CELLULE} en fonction du nombre de cellule(s) de votre tableau. Cela permet au tableau flexible de garder le bon alignement pour ses cellules.
Exemple : vous avez 4 cellules, utiliser la classe table-4. Vous pouvez aller jusqu’à 10 cellules.

<div class="wpeo-table table-flex table-2">
	<div class="table-row">
		<div class="table-cell">1</div>
		<div class="table-cell">Snow</div>
	</div>
</div>

Changer la taille d’une cellule

Rajouter certaines classes aux cellules en elles-même changent leur taille. Voici les classes disponibles

<div class="table-cell table-100">...</div>
  • table-25 : max-width: 25px
  • table-50 : max-width: 50px
  • table-75 : max-width: 75px
  • table-100 : max-width: 100px
  • table-125 : max-width: 125px
  • table-150 : max-width: 150px
  • table-175 : max-width: 175px
  • table-200 : max-width: 200px

Alignement d’une cellule

Utiliser la classe table-end justifie la cellule sur la droite

<div class="table-cell table-end">...</div>

Autre(s) classe(s)

A utiliser au même niveau que la classe table-cell

  • table-padding-0 : Enleve les marges internes d’une cellule

Exemple d’un tableau avancé regroupant tous les cas de figure

<div class="wpeo-table table-flex table-5">
	<div class="table-row table-header">
		<div class="table-cell table-50">#</div>
		<div class="table-cell table-150">Nom</div>
		<div class="table-cell table-150">Prénom</div>
		<div class="table-cell">Genre</div>
		<div class="table-cell table-50 table-end"></div>
	</div>
	<div class="table-row">
		<div class="table-cell table-50"><strong>1</strong></div>
		<div class="table-cell table-150">Snow</div>
		<div class="table-cell table-150">Jon</div>
		<div class="table-cell">Home</div>
		<div class="table-cell table-50 table-end"><i class="table-icon far fa-times"></i></div>
	</div>
	<div class="table-row">
		<div class="table-cell table-50"><strong>2</strong></div>
		<div class="table-cell table-150">Targaryen</div>
		<div class="table-cell table-150">Daenerys</div>
		<div class="table-cell">ND</div>
		<div class="table-cell table-50 table-end"><i class="table-icon far fa-times"></i></div>
	</div>
</div>
#
Nom
Prénom
Genre
1
Snow
Jon
Home
2
Targaryen
Daenerys
ND