28111 sujets

CSS et mise en forme, CSS3

[Résolu] FlexBox tableau responsive positionnement des blocks.

Bonjour,

je souhaiterai faire un tableau responsive en utilisant les média queries et flex-box.

Ce que j'aimerai c'est : si je suis au dessus de 40 rem le tableau sera comme ça (exemple pris sur un site) :

upload/1561630618-76166-responsivearray.png

et si je suis en dessous :

upload/1561630646-76166-responsivearray-inf40rem.png

Le problème c'est qu'avec flex-box je n'arrive pas à faire de même c'est à dire pour faire simple : c'est que si j'ai 3 blocks alignés comme ceci :
upload/1561631108-76166-responsivearrayexemple.png et bien je n'arrive
pas à mettre le titre au-dessus pour obtenir ceci :
upload/1561631300-76166-responsivearrayexemple2.png

Voilà si vous pouviez me dire s'il c'est au moins possible car sur un autre file de discussion j'ai vue qu'apparement avec flex-box on serait limité et ce que je tente de faire (dissocier les blocks les uns des autres ne serait pas possible).

Merci.

Ps. : ou est le bouton pour voir l'apperçu ?
Bonjour,

Ce qui me semble compliqué ici, c'est que les données sont dans un tableau.

Comme il est dit sur le lien "Maybe a table isn’t the answer!" .

Peut être en essayant avec des <div> (parents) et des <span> (item), en mettant les données dans des <span>.

Mais j'avoue que je n ai pas essayé !
Meilleure solution
Modérateur
Hello, sinon en gardant ta structure tableau, une manière d'obtenir ce genre de résultat est d'ajouter ton label (contenu de <th>) dans un data-attribute de ta cellule (<td data-title="Mon titre">). Ensuite simplement, masquer ton <thead> et récupérer ton data-title pour le placer dans un before.

td:before{content: attr(data-title);}
Bonjour,

J'ai voulu essayer ta solution Yordi mais je ne connais pas tellement les micro-datas (j'ai regardé un peu le livre HTML 5 de Rodolphe mais pas trop le temps...).J ai suivi mon idée avec les flex.
J ai repris les couleurs comme dans mon précédent post : orange pour CAPTION, vert pour TH et bleu pour TD.
Dans mon précédent post, j'avais mis une copie d'écran de 3 tableaux : le tableau 2 ne me semble pas adapté pour un comparatif car les données ne sont pas cote à cote. J'ai donc travaillé sur les tableaux 1 et 3.
Je n'ai pas fait les media queries, pas le temps...
Ci dessous (si tout va bien, car la derniere fois, j'ai galéré pour uploader l'image (pourtant - de 20 ko) : le site dit que c est enregistré mais ça ne l'est pas. j ai dû le refaire 3 fois) ce que j'ai obtenu (mais il y a encore du travail. j'ai mis le width en pixel , il faidrait surement changer ça).
Modifié par alain_47 (29 Jun 2019 - 20:06)
le code : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Table responsive CSS</title>
    <link rel="stylesheet" href="04.css">
</head>
<body>

<div id="tab1">
        <div class="caption">Comparatif</div>
        <div id="container1">
            <div class="row">
                <p class="th">Appareil</p>
                <p class="th">Largeur</p>
                <p class="th">Hauteur</p>
                <p class="th">Device-W</p>
                <p class="th">Device-H</p></div>
            <div class="row">
                <p class="td">iphone5</p>
                <p class="td">640</p>
                <p class="td">1136</p>
                <p class="td">320</p>
                <p class="td">533</p></div>
            <div class="row">
                <p class="td">iphone4</p>
                <p class="td">640</p>
                <p class="td">960</p>
                <p class="td">320</p>
                <p class="td">480</p></div>
        </div>
    </div> 

<br><br>

<div id="tab3">
    <div class="caption">Comparatif</div>
    <div id="container3">
        <div class="row">
            <p class="th">Appareil</p>
            <p class="th">Largeur</p>
            <p class="th">Hauteur</p>
            <p class="th">Device-W</p>
            <p class="th">Device-H</p></div>
        <div class="row">
            <p class="td">iphone5</p>
            <p class="td">640</p>
            <p class="td">1136</p>
            <p class="td">320</p>
            <p class="td">533</p></div>
        <div class="row">
            <p class="td">iphone4</p>
            <p class="td">640</p>
            <p class="td">960</p>
            <p class="td">320</p>
            <p class="td">480</p></div>
    </div>
</div> 

</body>
</html>


et le CSS 


.caption{
    background-color: orange;
    height: 50px; 
    line-height: 50px;
    font-size: 20px;
    text-align: center;
}
.th{background-color: lightgreen; font-weight: bold;}
.td{background-color: lightskyblue; text-align: center;}

p{  line-height: 30px;
    width: 120px; 
    height: 30px; 
    margin:0; padding:0;
    border: 1px dotted #eee;
    text-align: center;}

#tab1{display: flex; flex-direction: column; width: 360px;}
#container1{display: flex; flex-direction: column; width: 360px;}
.row{display: flex;}

#tab3{display: flex; flex-direction: column; width: 364px;}
#container3{display: flex; width: 360px;}
#tab3 div.row{display: flex; flex-direction: column;}
Merci beaucoup pour vos réponses, @Yordi merci pour ton aide, mais je connaissais cette technique vu sur un code source.
@alain_47 merci pour ton aide et ton code mais comme tu l'avais dit apparemment la solution flexbox plus balises de tableau ne font pas bon ménage.
Donc c'est au choix mais alors quel est la meilleur solution ?
balise table + flexbox + js
div + flexbox
ou autre on sait jamais quel est la meilleur solution au final ?
Bonjour,

Tout dépend de ton projet.

Le JS est puissant. il permet de coller au projet.

J'étais parti sur du responsive sans JS, c'est pour cela que j avais retenu mon code.

Mais si tu utilises du JS, tu peux partir sur du tableau également. Il y a surement des tutos pour faire des tableaux en responsive.

Mais le pble, à mon avis, c'est surtout le nombre d'appareils dans le comparatif. Sur un portable, ça va etre compliqué.

J'avais egalement regardé du cote des div en "cell". Il y a un tuto sur le présent site (de 5 pages).
Bonjour,
Je reviens sur le sujet (3 semaines plus tard, ca fait un peu du réchauffé, désolé).
J ai vu un tuto (Jonanthan) qui utilisait le "before" avec le label, tres ingénieux. L'auteur mentionnait le fait qu'on pouvait egalement le faire en PHP, ce qui m'a interessé.
On pourrait faire un premier fichier avec les datas uniquement (datas.php) : 

<?php
$labels = ['Appareil', 'Largeur', 'Hauteur', 'Device-L', 'Device-H','Densité px', 'Ratio'];

$items =[
    ['iphone5', 640, 1136, 320, 533,128,2],
    ['iphone4', 640, 960, 320,480,128,2],
    ['iphone3', 320, 480, 320,480,64,1],
];

puis un fichier principal "main.php" : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Table responsive CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<?php
    require 'datas.php';
    $nbreLabels = count($labels);
    $nbreItems = count($items);
?>

<h4>Tableau 'responsive' (datas en 'parallele')</h4>

<div class="table">
    <div class="caption">Comparatif</div>
    <div id="containerSection">
        <section>
            <?php for($i=0; $i<$nbreLabels; $i++): ?>
            <span class="th"><?= $labels[$i] ?></span>
            <?php endfor ?></section>
        <?php for($j=0; $j<$nbreItems; $j++): ?>
        <section>
            <?php for($i=0; $i<$nbreLabels; $i++):?>
                <span class="td"><?= $items[$j][$i]; ?></span>
            <?php endfor ?></section>
        <?php endfor ?>
    </div>
</div> 

<br><br>
<h4>Tableau 'responsive' (datas en 'serie')</h4>

<div class="table">
    <div class="caption">Comparatif</div>
    <div id="containerSection2">

        <section>
            <?php for($i=0; $i<$nbreLabels; $i++): ?>
            <span class="th"><?= $labels[$i] ?></span>
            <?php endfor ?></section>
        
        <?php for($j=0; $j<$nbreItems; $j++): ?>
        <section>
            <?php for($i=0; $i<$nbreLabels; $i++):?>
                <span class="td" data-label="<?= $labels[$i] ?>"><?= $items[$j][$i]; ?></span>
            <?php endfor ?></section>
        <?php endfor ?>
    
    </div>
</div> 

</body>
</html>

et ca donnerait ceci :
https://codepen.io/alain_47/pen/VoLEOe
Modifié par alain_47 (21 Jul 2019 - 16:37)
Sujet clos
Aller à