1486 sujets

Web Mobile et responsive web design

[Résolu] Données tabulaires responsives

Bonjour,
j'ai vu passer, il y a longtemps un exemple de tableau responsive pour présenter des données dans un tableau. Malheresement je ne retrouve pas et les exemples de tableaux responsives trouvés sur le net ne font pas tout à fait ce que je veux.

Il s'agit d'une interface web pour des mesures

L'idée est d'avoir en écran large

---------------------------------------------
|           capteur 1 | 4,2 V               |
|           capteur 2 | 23,5 °C             |
|        txt à droite | val align à gauche  |
---------------------------------------------

et en écran étroit

---------------------
|capteur 1          |
|             4,2 V |
|capteur 2          |
|           23,5 °C |
|txt à gauche       |
|    val align à dr.|
---------------------


En gros, empiler les cellules (et inverser l'alignement) au lieu de les disposer par ligne...

Est-ce possible ?
Merci

Christian
Modifié par ChristianW (07 May 2023 - 19:04)
Bonjour,

Sur cette page, le dernier tableau avec la classe ".table-responsive" me semble répondre à ce que vous cherchez : Tables.

Si c'est bien le cas je peux vous expliquer comment procéder, mais en gros on utilise des attributs data-* dans le html que l'on cache ou non en CSS selon la largeur voulue.
Bonjour,
je me suis amusé à tenter de résoudre ton problème avec flexbox. Ça fonctionne dans les grandes lignes, mais je n'ai pas réussi à décaler les chiffres en mode écran étroit. De plus, mon html craint un peu, avec un paragraphe pour chaque ligne. C'est du vite fait. Il faut aussi ajuter les padding et margin.
C'est une ébauche, juste pour voir si je pouvais résoudre le problème avec flexbox et te permettre peut-être d'avancer. Ici, on va sans doute rapidement corriger mon code.
Et bien sûr, la solution d'Olivier.
<style>
.container {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	background:lightgray;}
.tab1 {
	width:50%;
	text-align:right;
	padding:4px;}
.tab2 {
	width:50%;
	text-align:left;
	padding-left:8px;
	padding:8px;}

@media (max-width:35em) {
.container {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;}

.tab1, tab2 {
	flex-direction:rows;
	width:100%;
	background:lightgray;
	text-align:left;
	padding-right:8px;
	padding-left:8px;}
}
</style>

<div class="container">

<div class="tab1">
<p>capteur 1</p> 
 <p>capteur 2</p> 
     </div>
<div class="tab2">
 <p>4,2 V</p>               
  <p>23,5 °C</p> 
</div>
</div>

Modifié par Bongota (07 May 2023 - 21:43)
Merci pour vos proposition, mais elles ne semblaient (ou alors je m'y suis pris comme un manche) pas tout à fait correspondre. Néanmoins, j'ai quand même progressé grâce à elles et je suis arrivé à
https://codepen.io/ChrW/pen/gOBvXQw

Ça a l'air de faire ce que je voulais, à défaut de tests poussés sur différents navigateurs et plateformes...

Néanmoins, n'étant guère aguerri aux subtilités des CSS, je suis preneur de toute remarque !
Modifié par ChristianW (08 May 2023 - 00:14)
Modérateur
Bonjour,

J'aurais plutôt utilisé un @media (max-width: 30em) plutôt qu'un @media (min-width: 30em) et en conséquence mis les display:block pour les <th> et les <td> dans le @media (max-width: 30em). Et au passage, j'aurais mis un display:block non seulement aux <th> et <td>, mais aussi au <table> ainsi qu'à tous les éléments qu'il contient pour éviter toute mauvaise surprise en cas de feuille de style complexe par ailleurs. Ça me semble plus "propre" même si ici ça revient au même en pratique.

On n'a alors plus besoin de préciser des display: table-cell; pour les <tr> et les <td>, mais on a par contre besoin de rajouter un border: 2px solid #222; aux <tr> dans le @media (max-width: 30em).

Ça donne ça.
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #20262e;
  background-color: #9bc86a;
}

.container {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 5%;
}

h1 {
  text-align: center;
  font-size: 3rem;
  color: #fff;
  line-height: 1.4;
  margin: 0 0 2rem 0;
}

table {
  width: 100%;
  min-width: 10em;
  margin-bottom: 2.5rem;
  background-color: #222;
}

tr:nth-child(odd) {
  background-color: #385849;
}

th {
  color: #64f;
  text-align: right;
}

td {
  color: #fff;
  text-align: left;
}

th,
td {
  padding: 1.2rem 2rem;
}

@media (max-width: 30em) {
  table,
  table * {
    display: block;
  }

  tr {
    border: 2px solid #222;
  }

  th,
  td {
    margin: 0.5rem 2rem;
  }

  th {
    text-align: left;
  }

  td {
    text-align: right;
  }
}
Amicalement,
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à