1486 sujets

Web Mobile et responsive web design

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>
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.
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)
gc-nomade a écrit :

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


+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.
Modérateur
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.
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.
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)
Bonjour,

Je suis nouveau et j'aimerais qu'on m'oriente pour l'affichage d'information sur mon site Internet.

J'ai présentement l'information suivante pour un affichage (grand écran):
___________________________________
| IMAGE #1 | TEXTE #1 |
___________________________________
| IMAGE #2 | TEXTE #2 |
___________________________________
| IMAGE #3 | TEXTE #3 |
___________________________________

J'aimerais avoir l'affichage si dessous (petit écran):
__________________
| IMAGE #1 |
__________________
| TEXTE #1 |
__________________
| IMAGE #2 |
__________________
| TEXTE #2 |
__________________
| IMAGE #3 |
__________________
| TEXTE #3 |
__________________

Je suis en Joomla donc je peux faire du code HTML et mon site est responsive.

Michel