Table et media query

Bonjour

Je cherche à faire un tableau de 4 colonnes sur écran large ( >= 960px) et de 2 colonnes sur deux lignes su écran plus petit avec des bordures verticales séparatrices sur les colonnes 1,2,3 ( c est à dire pas de border-right sur la dernière colonne)

J y parviens sur un écran large mais quand je réduis mon écran, cela ne ressemble plus du tout à ce que je veux car les colonnes sont toutes sur la même ligne.

Vos conseils (même une autre approche) sont les bienvenus.

mon css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
table {
    width: 100%;
    border-collapse: collapse;
 
}
table td + td + td + td {
  border: none;
}
table,
tr,
td {
    border: none;
}
 
td {
    width: 50%;
    padding: 1em;
    border-right: 1px solid red;
}
 
@media screen and (min-width: 960px) {
    td {
        width: 25%;
    }
}

mon

Code:

merci de votre aide...

Bonjour,

Citation:

Vos conseils (même une autre approche) sont les bienvenus.

dans ce cas oublie l'élément <table> et passe à un mode de rendu via display:flex.

Merci, je vais suivre ton conseil :P