Table - EO Framework

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
table-225 : max-width: 225px
table-250 : max-width 250px
table-275 : max-width 275px
table-300 : max-width 300px

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