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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table>
                <tr>
                    <td>
                        cell 1
                    </td>
                    <td>
                        cell 2
                    </td>
                    <td>
                        Cell 3
                    </td>
                    <td>
                        Cell 4
                    </td>
                </tr>
            </table>

merci de votre aide...