1485 sujets

Web Mobile et responsive web design

Tableaux pour téléphone portable

Bonjour,
Je vous contacte car j'ai un souci avec une mise en page que je dois faire. Je m'explique on m'a demandé de faire une page planning sur lequel sont marqués sur les jours (lundi, mardi, mercredi, jeudi et vendredi) les activités qui sont proposées avec les horaires et dans deux endroits différents.
Pour réaliser ça, j'ai pensé le faire sous la forme d'un tableau. Jusque là pas de problème voici mon tableau qui correspond à ce que je veux.
<section id="no-more-tables">
<table class="table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th class="numeric"></th>
<th class="numeric">Lundi</th>
<th colspan="2" class="numeric">Mardi</th>
<th colspan="2" class="numeric">Mercredi</th>
<th class="numeric">Jeudi</th>
<th class="numeric">Vendredi</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>lundi</td>
<td colspan="2">mardi</td>
<td colspan="2">mercredi</td>
<td>jeudi</td>
<td>vendredi</td>
</tr>
<tr>
<td></td>
<td>Conflans</td>
<td>Pontoise</td>
<td>Conflans</td>
<td>Pontoise</td>
<td>conflans</td>
<td>conflans</td>
<td>conflans</td>
</tr>
<tr>
<td>12h00 &ndash; 13h00</td>
<td>Pilates</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Pilates</td>
<td>Pilates</td>
</tr>
<tr>
<td>12h30 &ndash; 13h30</td>
<td></td>
<td>sophrologie</td>
<td></td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>13h15 &ndash; 14h15</td>
<td>Pilates</td>
<td></td>
<td></td><td></td><td></td><td></td>
<td>Pilates</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>18h00 &ndash; 18h45</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Zumba kids 4 6 ans</td>
</tr>
<tr>
<td>18h00 &ndash; 19h00</td>
<td></td>
<td></td>
<td></td>
<td>Sophrologie</td>
<td></td>
<td>Sophrologie</td>
<td></td>
</tr>

<tr>
<td>18h30 &ndash; 19h30</td>
<td></td>
<td>Zumba</td>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>18h45 &ndash; 19h45</td>
<td></td>
<td></td><td>Pilates</td>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>19h00 &ndash; 19h45</td>
<td></td><td></td><td></td><td></td><td></td><td></td>
<td>Zumba kids junior</td>
</tr>
<tr>
<td>19h00 &ndash; 20h00</td>
<td>Danse de salon</td>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>19h15 &ndash; 20h15</td>
<td></td><td></td><td></td><td></td><td></td>
<td>Bachata</td>
<td></td>
</tr>
<tr>
<td>19h30 &ndash; 20h30</td>
<td>renforcement musculaire</td>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>20h00 &ndash; 21h00</td>
<td></td><td></td><td></td>
<td>Danse de salon</td>
<td>Danse de salon</td>
<td>Danse de salon</td>
<td>Entraînement Danse de salon</td>
</tr>
<tr>
<td>20h15 &ndash; 21h15</td>
<td></td>
<td></td>
<td>Bachata</td>
<td></td>
<td></td>
<td></td><td></td>
</tr>
<tr>
<td>20h30 &ndash; 21h30</td>
<td></td><td></td><td></td><td>zumba</td><td></td><td></td>
<td></td>
</tr>
<tr>
<td>20h45 &ndash; 21h45</td>
<td></td>
<td>Pilates</td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>21h00 - 22h00</td>
<td></td>
<td>Danse de salon</td>
<td></td><td></td><td></td><td>Danse de salon</td>
<td>Entraînement Danse de salon</td>
</tr>
</tbody>
</table>
</section>

Le tableau n'a pas de style mais pour l'instant ce n'est pas mon souci.
Mon souci est le visuel sur un téléphone portable. En effet j'ai réfléchi pour éventuellement faire que ça s'affiche les uns en dessous des autres. J'ai essayé de trouvé sur internet et j'ai trouvé en mettant du css que le tableau se change en bloc les un en dessous des autres.
si vous mettez ce code css 
@media only screen and (max-width: 800px) {
	
	/* Force table to not be like tables anymore */
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	#no-more-tables tr { border: 1px solid #ccc; }
 
	#no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	#no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}

vous pouvez voir que ça va bien les uns en dessous des autres.
Mais mon souci est que je n'arrive pas à mettre les jours, la salle et les horaires avec les activités les un en dessous des autres. Je pense que ça vient de mon tableau qui est mal conçu. Mais je n'arrive pas à voir comment je peux représenter les données qui sont sur le tableau d'une autre façon.
Donc ma demande est soit de me donner des idées de présentation autres pour que ça fasse quelque chose de clair et qui soit possible de bien le présenter aussi sur portable.
J'ai vu qu'au pire je peux faire un tableau en scroll pour le portable, mais je ne trouve pas ça très esthétique ni très ludique.
Donc je suis ouverte à toutes propositions.
Merci à l'avance pour votre aide.
Bonsoir. Pour arriver à vos fins le style a son importance. Je vous invite à vous penchet sur les attributs html5 data-* et leur affichage via css.

Un exemple (voir le code source) : tables
Bonsoir Olivier
Merci pour ton lien il a l'air de correspondre à ce que je cherche. Je vais regarder ça dans le week end et je reviendrai dire si c'est ok.
En faisant mes recherches je n'ai pas trouvé ce site.
Merci, Bonne soirée,
Sandgirl
sandgirl a écrit :
En faisant mes recherches je n'ai pas trouvé ce site.

C'est normal ce n'est pas un truc connu, ce framework est le mien.

Le détail du style est ici (codé en stylus) : styles tables for scriptura

Et comme je le dis dans les annotations du code :
a écrit :
Pour les tableaux, de part leur nature, l'approche adaptatif design prend le pas sur le mobile first.

À avoir en tête à l'analyse du code.
Modifié par Olivier C (20 Aug 2016 - 08:42)
Bonjour Olivier et autres Smiley cligne
Bon je reviens vers vous après avoir essayé de faire un tableau qui puisse être aussi lisible sur un écran d'ordinateur que sur un écran de téléphone portable.
Donc grâce à ton aide Olivier, j'ai pu réaliser un peu ce que je voulais faire. Par contre ce n'est pas encore Byzance....
voici ce que j'ai fait. Déjà voici le code pour mon tableau

<table class="table">
<thead>
<tr>
<th></th>
<th>Lundi</th>
<th colspan="2">Mardi</th>
<th colspan="2">Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
</tr>
<tr>
  <th></th>
<th>Conflans</th>
<th>Conflans</th>
<th>Pontoise</th>
<th>conflans</th>
<th>Pontoise</th>
<th>conflans</th>
<th>conflans</th>
</tr>
</thead>
<tbody>
<tr>
<td data-thead="heure">De 12h00 à 13h00</td>
<td data-thead="Lundi -Conflans">Pilates</td>
<td data-thead="Mardi - Conflans"></td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans"></td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans">Pilates</td>
<td data-thead="Vendredi - Conflans">Pilates</td>
</tr>
<tr>
<td data-thead="heure">De 12h30 à 13h30</td>
<td data-thead="Lundi -Conflans"></td>
<td data-thead="Mardi - Conflans">sophrologie</td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans"></td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans"></td>
<td data-thead="Vendredi - Conflans"></td>
</tr>
<tr>
<td data-thead="heure">De 13h15 à 14h15</td>
<td data-thead="Lundi -Conflans">Pilates</td>
<td data-thead="Mardi - Conflans"></td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans"></td><td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans"></td>
<td data-thead="Vendredi - Conflans">Pilates</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td data-thead="heure">De 18h00 à 18h45</td>
<td data-thead="Lundi -Conflans"></td>
<td data-thead="Mardi - Conflans"></td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans"></td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans"></td>
<td data-thead="Vendredi - Conflans">Zumba kids 4 6 ans</td>
</tr>
<tr>
<td data-thead="heure">De 18h00 à 19h00</td>
<td data-thead="Lundi -Conflans"></td>
<td data-thead="Mardi - Conflans"></td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans">Sophrologie</td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans">Sophrologie</td>
<td data-thead="Vendredi - Conflans"></td>
</tr>
<tr>
<td data-thead="heure">De 18h15 à 19h15</td>
<td data-thead="Lundi -Conflans"></td>
<td data-thead="Mardi - Conflans">Pilates</td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans"></td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans"></td>
<td data-thead="Vendredi - Conflans"></td>
</tr>
<tr>
<td data-thead="heure">De 19h00 à 19h45</td>
<td data-thead="Lundi -Conflans"></td>
<td data-thead="Mardi - Conflans"></td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans"></td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans"></td>
<td data-thead="Vendredi - Conflans">Zumba kids junior</td>
</tr>
<tr>
<td data-thead="heure">De 19h00 à 20h00</td>
<td data-thead="Lundi -Conflans"></td>
<td data-thead="Mardi - Conflans"></td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans"></td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans">danse De salon débutant</td>
<td data-thead="Vendredi - Conflans"></td>
</tr>
<tr>
<td data-thead="heure">De 19h15 à 20h15</td>
<td data-thead="Lundi -Conflans"></td>
<td data-thead="Mardi - Conflans"></td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans">Bachata</td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans"></td>
<td data-thead="Vendredi - Conflans"></td>
</tr>
<tr>
<td data-thead="heure">De 19h30 à 20h30</td>
<td data-thead="Lundi -Conflans">renforcement musculaire</td>
<td data-thead="Mardi - Conflans">Zumba</td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans"></td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans"></td>
<td data-thead="Vendredi - Conflans"></td>
</tr>
<tr>
<td data-thead="heure">De 20h00 à 21h00</td>
<td data-thead="Lundi -Conflans"></td>
<td data-thead="Mardi - Conflans"></td>
<td data-thead="Mardi - Pontoise">Danse De salon pour avancés</td>
<td data-thead="Mercredi - Conflans"></td>
<td data-thead="Mercredi - Pontoise">Danse De salon pour débutant</td>
<td data-thead="Jeudi - Conflans">Danse De salon pour avancés</td>
<td data-thead="Vendredi - Conflans">Entrainement Danse De salon</td>
</tr>
<tr>
<td data-thead="heure">De 20h15 à 21h15</td>
<td data-thead="Lundi -Conflans"></td>
<td data-thead="Mardi - Conflans"></td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans">Bachata</td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans"></td>
<td data-thead="Vendredi - Conflans"></td>
</tr>
<tr>
<td data-thead="heure">De 20h30 à 21h30</td>
<td data-thead="Lundi -Conflans">Zumba</td>
<td data-thead="Mardi - Conflans"></td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans"></td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans"></td>
<td data-thead="Vendredi - Conflans"></td>
</tr>
<tr>
<td data-thead="heure">De 20h45 à 21h45</td>
<td data-thead="Lundi -Conflans"></td>
<td data-thead="Mardi - Conflans">Pilates</td>
<td data-thead="Mardi - Pontoise"></td>
<td data-thead="Mercredi - Conflans"></td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans"></td>
<td data-thead="Vendredi - Conflans"></td>
</tr>
<tr>
<td data-thead="heure">De 21h00 à 22h00</td>
<td data-thead="Lundi -Conflans"></td>
<td data-thead="Mardi - Conflans"></td>
<td data-thead="Mardi - Pontoise">Danse De salon pour avancés</td>
<td data-thead="Mercredi - Conflans"></td>
<td data-thead="Mercredi - Pontoise"></td>
<td data-thead="Jeudi - Conflans">Danse De salon pour confirmés</td>
<td data-thead="Vendredi - Conflans">Entrainement Danse De salon</td>
</tr>
</tbody>
</table>

Personnellement le visuel sur écran d'ordinateur me conviendrai tel quel. Par contre pour les téléphone portable grâce à ce css 

[class^="table"] {
    background-color: #fefefe;
    border-collapse: separate;
    border-spacing: 0.2em;
    box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.25);
    margin: 1em 0;
    text-align: left;
    width: 100%;
    word-wrap: break-word;
}
[class^="table"] thead {
    background-color: #b03c57;
    color: #eee;
}
.gradient, .gradient-top, .button, [type="range"] + output, .accordion-link > a, [class^="table"] thead {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.05));
}
[class^="table"] tbody td {
    border: 1px solid #ddd;
}
[class^="table"] th, [class^="table"] td {
    font-weight: 300;
    padding: 0.5em 1em;
    vertical-align: top;
}
@media (max-width: 36.01rem) {
[class^="table"] {
    border: 0.2em solid #b03c57;
    border-collapse: collapse;
}
[class^="table"] thead {
    display: none;
}
[class^="table"] td {
    display: block;
}
[class^="table"] tbody td:first-child {
    background-color: #b03c57;
    color: #eee;
}
[class^="table"] tbody td:empty {
    display: none;
}
[class^="table"] tfoot *:empty {
    display: none;
}
[class^="table"] tbody td::before {
    content: attr(data-thead) " : ";
    display: inline;
}
}
@media (min-width: 36.01rem) {
[class^="table"][class*="firstcolumn"] tbody td:first-child {
    background-color: #5a728a;
    color: #eee;
}
[class^="table"] tbody td {
    border: 1px solid #ddd;
}
[class^="table"] tbody *:empty {
    background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 6px);
    background-size: 8px 8px;
}
}

j'ai pu mettre en block. Mais je trouve la disposition moyenne. En effet, ça se met bien en block mais le souci est que ça se met en block sur les heures. Je n'arrive pas à faire que ça se mette sur les jours. C'est peut être mon tableau qui est mal disposé. Mais j'ai du mal....
Je ne sais pas si je suis claire.
Si vous avez des idées à me donner pour faire que quand c'est sur portable le block en premier soit les jours. Je me dis qu'il faut peut être que je mettes les heures en thead et les jours dans le tbody mais du coup pour les ordinateurs je ne suis pas sure que ce soit très judicieux.
Enfin bref, je vais continuer à réfléchir dessus, Mais j'espère que vous pourrez me donner des idées auxquelles je n'ai pas eu l'intelligence d'y penser Smiley cligne
En attendant merci encore Olivier pour tes liens qui m'ont bien aidés.
Je viens de tomber sur votre discussion,

merci pour les codes, c'est très pratique !
Sujet clos
Aller à