Rendre un tableau html responsive

Question

CVFlashJob

4 Jan 2016 à 00:17

Bonjour

Pouvez-vous s'il vous plaît m'aider à rendre ce tableau responsive ? Ca fait plusieurs jours que je cherche, je ne maitrise pas les medias queries. Aidez-moi svp !

mon tableau a une dimension de 3 colonnes sur 2 lignes.
Sur la version mobile, j'aimerais que les cellules s'affichent les unes à la suite des autres (En gros toutes les cellules en 1 seule colonne.)
Les versions bureau et tablette doivent être pareilles (cad l'affichage du tableau en entier sur l'écran)

Voici le code de mon tableau, je vous remercie de votre aide.

<div class="container">

<table>
<tr>
<td>
<div class="carre">
<br>
<h4>Expertise</h4>
<br>
<p style="color:#FFFFFF" ></p>										
</div>
</td>
<th style="width:30px;"></th>

<td>
<div class="carre2">
<br>
<h4>Efficacité</h4>
<br>
<p style="color:#000000" ></p>										
</div>
</td>

<th style="width:30px;"></th>
<td>
<div class="carre">
<br>
<h4>Proximité</h4>
<br>
<p style="color:#FFFFFF" ></p>										
</div>
</td>
<br><br>
</tr>
<tr style="height:30px;"></tr>
<tr>
<td>
<div class="carre2">
<br>
<h4>Authenticité</h4>
<br>
<p style="color:#000000" ></p>										
</div>
</td>

<th style="width:30px;"></th>

<td>
<div class="carre">
<br>
<h4>Réseau</h4>
<br>
<p style="color:#FFFFFF" ></p>										
</div>
</td>
<th style="width:30px;"></th>

<td>
<div class="carre2">
<br>
<h4>Disponibilité</h4>
<br>
<p style="color:#000000" ></p>										
</div>
</td>
</tr>
</table>
</div><div class="container">

<table>
<tr>
<td>
<div class="carre">
<br>
<h4>Expertise</h4>
<br>
<p style="color:#FFFFFF" ></p>										
</div>
</td>
<th style="width:30px;"></th>

<td>
<div class="carre2">
<br>
<h4>Efficacité</h4>
<br>
<p style="color:#000000" ></p>										
</div>
</td>

<th style="width:30px;"></th>
<td>
<div class="carre">
<br>
<h4>Proximité</h4>
<br>
<p style="color:#FFFFFF" ></p>										
</div>
</td>
<br><br>
</tr>
<tr style="height:30px;"></tr>
<tr>
<td>
<div class="carre2">
<br>
<h4>Authenticité</h4>
<br>
<p style="color:#000000" ></p>										
</div>
</td>

<th style="width:30px;"></th>

<td>
<div class="carre">
<br>
<h4>Réseau</h4>
<br>
<p style="color:#FFFFFF" ></p>										
</div>
</td>
<th style="width:30px;"></th>

<td>
<div class="carre2">
<br>
<h4>Disponibilité</h4>
<br>
<p style="color:#000000" ></p>										
</div>
</td>
</tr>
</table>
</div>

JENCAL

4 Jan 2016 à 10:14

CVFlashJob a écrit :
Bonjour

Pouvez-vous s'il vous plaît m'aider à rendre ce tableau responsive ? Ca fait plusieurs jours que je cherche, je ne maitrise pas les medias queries. Aidez-moi svp !

ah mince... j'allais te dire "regarde les medias queries !". C'est vraiment pas compliqué à comprendre.

gc-nomade

4 Jan 2016 à 17:10

en gros, pour une page de 640 pixel et moins de large, tu peut faire un truc du genre :

@media screen and (max-width: 640px) {
  table,
  tbody,
  tr,
  td {
    display: block;
    width: auto!important;
    /* parceque tu as mis des style inline grrr */
  }
}

et hop un tableau HTML que l'on reformate en mode DIV Smiley decu

Cdt
Modifié par gc-nomade (04 Jan 2016 - 17:12)

Super_baloo8

6 Jan 2016 à 12:19

gc-nomade a écrit :

et hop un tableau HTML que l'on reformate en mode DIV

+1, les tableaux HTML servent à présenter des données.

Ici tes tableaux, semble, à mon avis, servir pour la mise en page de ton site, mauvaise pratique Smiley cligne

Essaye de retravailler ton site avec une vrai structure html, et tu verras que le code responsive n'en sera que plus simple.

koala64

Modérateur

25 Aug 2017 à 17:17

Bonjour !

J'arrive un peu après la bataille du fait de ma longue absence sur le forum, mais comme ce sujet est bien référencé, ça me semblait pas mal de donner une solution possible vu que les tableaux posent souvent problème lorsqu'on s'attaque au responsive.

En fait, il est possible de parvenir à ses fins en associant media queries, flexbox, pseudo-éléments ainsi que la fonction calc.
L'idée est de transformer chaque ligne du tableau en colonne et de répéter l'entête du tableau devant les cellules.

Un exemple valant mieux qu'un long discours :


<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Tableau responsive</title>
		<style>

table {
	background:#666;
	border-collapse:collapse;
	width:100%;
}
th {
	color:white;
}
th, td {
	text-align:center;
	padding:5px;
	border-right:1px solid black;
}
th:last-child, td:last-child {
	border-right:0;
}
tbody tr:nth-child(odd) {
	background:#ccc;
}
tbody tr:nth-child(even) {
	background:#aaa;
}
@media screen and (max-width:800px) {
	table {
		display:flex;
	}
	thead {
		width:20%;
		min-width:90px;
	}
	tbody {
		flex:1;
	}
	tr {
		display:flex;
		flex-direction:column;
	}
	th, td {
		text-align:left;
		border-right:0;
		border-bottom:1px solid black;
	}
	tr:last-child td:last-child {
		border-bottom:0;
	}
	tbody tr:not(:first-child) td::before {
		position:absolute;
		content:'Pseudo';
		color:white;
		font-weight:bold;
		width:calc(20% - 13px);
		min-width:90px;
		padding:5px;
		border-bottom:1px solid black;
		margin-left:calc(-20% - 2px);
		margin-top:-5px;
	}
	tbody tr:last-child td:last-child::before {
		border-bottom:0;
	}
	tbody tr:not(:first-child) td:nth-of-type(2)::before {
		content:'Age';
	}
	tbody tr:not(:first-child) td:nth-of-type(3)::before {
		content:'Classement';
	}

}
@media screen and (max-width:461px) {
	tbody tr:not(:first-child) td::before {
		margin-left:-95px;
	}
}
		</style>
	</head>
	<body>

<table summary="Tableau des membres" cellpadding="0" cellspacing="0">
	<thead>
		<tr>
			<th>Pseudo</th>
			<th>Age</th>
			<th>Classement</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Riri</td>
			<td>24</td>
			<td>3</td>
		</tr>
		<tr>
			<td>Fifi</td>
			<td>19</td>
			<td>2</td>
		</tr>
		<tr>
			<td>Loulou</td>
			<td>39</td>
			<td>1</td>
		</tr>
	</tbody>
</table>

	</body>
</html>

Ainsi, on conserve l'aspect tabulaire tout en restant visuellement agréable sur petit écran.

Cordialement.

boteha_2

3 Sep 2017 à 15:44

Bonjour,

koala64 a écrit :
Bonjour !
En fait, il est possible de parvenir à ses fins en associant media queries, flexbox, pseudo-éléments ainsi que la fonction calc.
L'idée est de transformer chaque ligne du tableau en colonne et de répéter l'entête du tableau devant les cellules.

Très intéressant, merci.

Je rencontre un problème proche mais plus compliqué et peut-être insoluble.
Admettons qu'une ligne de tableau se compose de 6 cellules :

<tr><td>Un</td><td>Deux</td><td>Trois</td><td>Quatre</td><td>Cinq</td><td>Six</td></tr>

Je veux effectivement passer en mise en page verticale, mais par groupe de deux cellules.
Le rendu sur petit écran devrait être :

Un Deux
Trois Quatre
Cinq Six

En énonçant le problème il me vient une idée :

tr {display: flex; flex-orientation : row}
td {width: 50 %}

Je vais travailler là-dessus.

boteha_2

4 Sep 2017 à 21:57

Bonjour,

Rapidement, ce simple code donne déjà un résultat intéressant :

table thead {display: none}
table tr {display: flex; flex-wrap: wrap}

Avec un petit padding sur les td, la disposition est harmonieuse.
Pas de rappel systématique des entêtes comme avec koala64, en l’occurrence le contenu se suffit à lui-même.

Si le contenu d'une colonne dans le tableau est à longueur variable alors que les autres contenus sont à longueur fixe, il est possible de récupérer un alignement de type tableau en permettant à la colonne variable de s'agrandir, par exemple si c'est la deuxième colonne :

table tr td:nth-child(2) {flex-grow: 1}

Rien n'est parfait mais sur petit écran c'est déjà beaucoup mieux qu'un tableau en display table.
Modifié par boteha_2 (17 Sep 2017 - 17:05)

crackel

15 Sep 2017 à 03:25

boteha_2

17 Sep 2017 à 14:46

Bonjour,

Image et texte en display: block
Cela me semble le plus simple.

Olivier C

17 Sep 2017 à 15:12

Exemple avec l'utilisation de data attributes : Tables
Le HTML : Github, html tables
Le CSS : Github, css tables

Sujet clos

Web Mobile et responsive web design

Rendre un tableau html responsive