Sujet Précédent Sujet Suivant

Tableau responsive 4 colonnes

Résolu/Fermé
rem_s Messages postés 3 Date d'inscription lundi 30 mars 2015 Statut Membre Dernière intervention 30 mars 2015 - Modifié par jordane45 le 30/03/2015 à 13:51
rem_s Messages postés 3 Date d'inscription lundi 30 mars 2015 Statut Membre Dernière intervention 30 mars 2015 - 30 mars 2015 à 16:51
Bonjour à tous,

Je bloque sur un problème que voici :

J'ai un tableau de 4 colonnes et 3 rangées dans lesquelles s'affichent des données (chaque donnée dans chaque cellule n'a aucune relation les unes aux autres). Dans l'idéal, j'aimerais rendre ce tableau "responsive" :
- avec @media only screen and (min-width: 1024px) : il s'affiche normalement sur 4 colonnes.
- avec @media screen and (min-width: 500px) and (max-width: 1024px) : il s'affiche sur 2 colonnes / 6 rangées.
- avec @media screen and (max-width: 500px) : il s'affiche sur 1 seule colonne / 12 rangées.

Mon tableau actuel est sous forme : 

<table>
     <tbody>
     <tr>
          <td>cel 1</td>
          <td>cel 2</td>
          <td>cel 3</td>
          <td>cel 4</td>
     </tr>
     <tr>
          <td>cel 5</td>
          <td>cel 6</td>
          <td>cel 7</td>
          <td>cel 8</td>
     </tr>
     <tr>
          <td>cel 9</td>
          <td>cel 10</td>
          <td>cel 11</td>
          <td>cel 12</td>
     </tr>
     </tbody>
</table>


Je ne sais pas vraiment comment m'y prendre et j'ai beau cherché, je ne trouve rien (je suis peut-être trop gourmand?)
Comment puis-je m'y prendre ?

Merci par avance

EDIT : Ajout du langage dans les balises de code

A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
30 mars 2015 à 13:51
Bonjour,

De mon point de vue... un TABLEAU (html) contient des LIGNES avec des cellules dedans (ce qui correspond à tes colonnes....) .. il n'est pas possible de modifier ta TR pour en faire 2 en fonction de la taille de la fenêtre ( enfin si .. c'est possible ...mais compliqué pour pas grand chose...)
L'idéal je pense, serait plutôt de remplacer ton tableau par des DIV ...(ou du moins tes TD (en faisant une grande cellule dans laquelle tu mettrais tes div)
ainsi ... en fonction de la taille de ton écran.. tu peux définir des largeurs à tes div et (en jouant avec le display (blocks .. inline...) les positionner côte à côté ou en dessous selon tes besoins...


-1
Réponse 2 / 3
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 30/03/2015 à 15:32
Bonjour
comme tes données n'ont pas de relations entre elle ce ne sont pas des données tabulaires
il faut donc utiliser des div avec display: inline-block
tu mets ces div dans une div parent 

    <div id="parent">
    <div class="donnees"></div>
    <div class="donnees"></div>
    <div class="donnees"></div>
    <div class="donnees"></div>
    etc ....
    </div>


#parent {
font-size:0; /**pour éviter le withe-space**/
text-align:center; /**pour centrer les div donnees**/
}
.donnees {
display:inline-block;
font-size: ce que tu veux;
text-align:ce que tu veux;
}


ensuite suivant les media-query tu mets des width en % et des max-width et ou min-width en px pour .donnees

enfin pense que tu si a un (min-width: 1024px) le suivant doit être (max-width: 1023px)
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
-2
Réponse 3 / 3
rem_s Messages postés 3 Date d'inscription lundi 30 mars 2015 Statut Membre Dernière intervention 30 mars 2015
30 mars 2015 à 16:26
Grand merci jordane45 et animostab pour vos réponses rapides.

Je m'entêtais bêtement à vouloir appliquer les principes d'un tableau de base alors qu'avec des div, c'est plus simple et plus clair. Je me suis donc tourné vers cette solution mais j'ai abandonné l'idée de mettre le tableau sur 2 colonnes / 6 rangées pour une résolution intermédiaire (je galère avec le positionnement des div...)

J'ai procédé comme suit :
- le html : 
<div class="row">
     <div class="col">données</div>
     <div class="col">données</div>
     <div class="col">données</div>
     <div class="col">données</div>
</div>
<div class="row">
     <div class="col">données</div>
     <div class="col">données</div>
     <div class="col">données</div>
     <div class="col">données</div>
</div>
<div class="row">
     <div class="col">données</div>
     <div class="col">données</div>
     <div class="col">données</div>
     <div class="col">données</div>
</div>

- le css : 
.row {
	width: 100%;
	display: table;
	table-layout: fixed;
	text-align: center;
	margin-bottom: 5px;
	}
.col {
	display: table-cell;
	padding:0 10px;
	border: 2px solid #a1a1a1;
	border-radius: 25px;
	}

@media (max-width: 750px) {
	.col {
		display: inline-block;
		margin-bottom:5px;
        	width: 95% !important;
		padding:10px 10px 10px 10px;
		text-align: center;
		font-size:16px;
		border: 2px solid #a1a1a1;
		border-radius: 25px;
    		}
	}

Le tableau s'affiche correctement sur 4 colonnes / 3 rangées pour toute résolution supérieure à 750px, en dessous de 750px, chaque div (cellule de données) est l'une en dessous de l'autre. Ce qui me convient.

Le seul ic est que je n'arrive pas à coller un espacement de 5px entre chaque div horizontalement certainement dû au display: table-cell;

Je marque le sujet comme résolu, mais suis quand même preneur d'autres solutions ;)
-2
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié par jordane45 le 30/03/2015 à 16:30
bonjour,
pour ton pb d'espacement tu dois pouvoir jouer avec la propriété margin.

Par exemple : 
.col {
 display: table-cell;
 padding:0 10px;
 border: 2px solid #a1a1a1;
 border-radius: 25px;
 margin-bottom : 5px;
 }
0
rem_s Messages postés 3 Date d'inscription lundi 30 mars 2015 Statut Membre Dernière intervention 30 mars 2015
30 mars 2015 à 16:51
J'ai essayé avec margin-bottom mais ça ne marche pas avec display: table-cell;

Du coup, en ajoutant "border-spacing:5px;" à ".row", la disposition entre chaque div s'applique automatiquement. Je ne connaissais pas l'astuce et ça a l'air de faire le job.
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Great Teacher Onizuka SAISON 2
remi1912 -
Firaz -

34 réponses
Windows defender: avertissement de sécurité
surfinia -
Tchoumi -

20 réponses