Partage

Masquer colonne d'un tableau

Sujet résolu

22 janvier 2023 à 11:51:23

Bonjour,

En fonction de la largeur d'écran qui affiche mon tableau je souhaite masquer des colonnes.
Cette question a déjà été posée là https://openclassrooms.com/forum/sujet/masquer-des-colonnes-via-la-balise-col mais quand j'applique

@media screen and (max-width:780px)
{

th.salle, td.salle {visibility: collapse;}

}

Seules les données contenues dans la colonne disparaissent et non pas la colonne entière.

Je suppose que j'ai loupé un truc, merci pour votre aide.

AbcAbc6

22 janvier 2023 à 22:12:20

Bonsoir, pourrait-on voir le HTML correspondant + votre CSS pour que l'on puissent voir quel est le problème?

Delher

23 janvier 2023 à 9:29:36

Bonjour,

Merci de te pencher sur mon problème, voici les codes

<table class="liste">
<tr><td>Flyer</td><td>date</td><td>heure</td><td class='lieu'>lieu</td><td class='salle'>Salle</td><td class='organisateur'>organisateur</td><td>prix</td>
</tr>

<?
	$sql = "SELECT * FROM baia_evenements WHERE date = CURDATE() OR date > CURDATE() ORDER BY date ASC LIMIT 0, 10 ";	
	$req = $bdd->query($sql) or die(print_r($bdd->errorInfo()));				
	while ($a = $req->fetch()){	

		$date = explode ('-', $a['date']);
		$heure = explode (':', $a['heure']);
?>	

	<tr><td>
	<img border='0' src='images/flyers/<?
	if (file_exists ("images/flyers/$a[id].jpg"))
		echo "$a[id].jpg'";
	else
		echo "defaut.png'";
	?> 
	width='30' height='auto' /></td>

<?		
		echo "<td>$date[2]/$date[1]</td><td>$heure[0]:$heure[1]</td><td class='lieu'>$a[lieu]</td><td class='salle'>$a[salle]</td><td class='organisateur'>$a[organisateur]</td><td>$a[prix]</td></tr>\n";
	}
	
	$req->closeCursor();
?>	

</table>

et le CSS

table
{
	margin: auto;
	vertical-align: middle;
	
}
table.liste
{
	margin-top: 1em; 
	border-collapse:collapse; 
	border: 1px solid silver; 
}

table.liste td
{
	border-collapse:collapse; 
	border:1px solid silver; 
	padding:5px; 
}

th
{
	border-collapse:collapse; 
	border: 1px solid black; 
	padding: 5px; 
	background-color: #84898F; 
	color: white;
}

@media screen and (max-width:780px)
{
th.salle, td.salle {visibility: collapse;}
th.organisateur, td.organisateur {visibility: collapse;}

}

et le résultat

-
Edité par Delher 23 janvier 2023 à 11:44:36

Domi65

23 janvier 2023 à 16:11:39

Bonjour. Pour masquer la colonne, ce n'est pas la propriété visibility qu'il fauut mdifier mais display

display: none

Delher

23 janvier 2023 à 23:02:48

Bonsoir,

Sauf erreur de ma part "display:none" ne fonctionne pas sur les colonnes de tableau

AbcAbc6

24 janvier 2023 à 2:44:22

Bonsoir, quand vous postez sur le forum HTML, donner le code HTML générer pas le PHP pour que l'on puisse reproduire le problème.

Passez votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

Les entêtes de tableau s'écrive avec la balise <th> et pas <td>.

L'attribut border est obsolète, c'est en CSS que l'on spécifie une bordure.

La balise <img> ne sort jamais sans son attribut alt obligatoire, il sert à indiquer une description pour l'image.

Vous voulez faire disparaitre deux colonnes de votre tableau mais vous n'avez pas de colonne!!

Le problème que j'ai rencontré est la différence de traitement de l'affichage des bordures entre chrome et Firefox (pas tester sur Edge). Je n'ai pas réussi à produire un code qui était valable pour ces deux navigateur en même temps, malgré l'usage de prefixe vendeur lors de mes test.

Je vous propose le code suivant:

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style>
        table {
            margin: auto;
            vertical-align: middle;

        }

        table.liste {
            margin-top: 1em;
            border-collapse: collapse;
            border: 1px solid silver;
        }

        table.liste td {
            border-collapse: collapse;
            border: 1px solid silver;
            padding: 5px;
        }

        th {
            border-collapse: collapse;
            border: 1px solid black;
            padding: 5px;
            background-color: #84898F;
            color: white;
        }

        @media screen and (max-width:780px) {
            .columns2 {
                visibility: collapse;

            }

           th,  table.liste, table.liste td {
                border: none;
            }
            table.liste td:not(:nth-of-type(6)) ,table.liste th:not(:nth-of-type(6)) {
                border: 1px solid silver;
            }
            table.liste td:nth-of-type(7), table.liste th:nth-of-type(7) {
               border: none;
            }

        }
    </style>

</head>

<body>
    <table class="liste">
        <colgroup>
            <col class="column1" span="4">
            <col class="columns2" span="2">
            <col class="columns3">
        </colgroup>
        <tr>
            <th>Flyer</th>
            <th>date</th>
            <th>heure</th>
            <th class='lieu'>lieu</th>
            <th class='salle'>Salle</th>
            <th class='organisateur'>organisateur</th>
            <th>prix</th>
        </tr>
        <tr>
            <td></td>
            <td>26/01</td>
            <td>14:00</td>
            <td class='lieu'>Fréjus</td>
            <td class='salle'>Salle 1</td>
            <td class='organisateur'>Jean</td>
            <td>Gratuit</td>
        </tr>
    </table>
</body>
</html>

@Domi65 Lire :

Sylvain_ni

24 janvier 2023 à 7:04:44

Merci, pour cette réponse, ça va aussi m'aider sur mon site

https://clavier-mecanique.net/

Delher

26 janvier 2023 à 20:48:11

Bonjour,

C'est noté pour poster le html
Mes entêtes étaient bien en th, erreur de copier/coller sur un essai sans th
Je ne savais pas pour border, c'est enregistré
Pour alt c'était prévu mais j'en suis qu'au début
C'est en parcourant Mozilla que j'avais découvert et essayé vivibility

J'ai testé le code proposé.

Les colonnes s'estompent mais les colonnes restantes n'occupent pas tout l'espace, comme si l'emplacement des colonnes estompées était conservé, et il semblerait que la colonne 7 prenne la largeur de la colonne 4 d'entête et conserve cette dimension tant qu'elle le peut, les images ci-après avec deux résolutions d'écran illustrent cela

-
Edité par Delher 26 janvier 2023 à 20:49:19

thetui

27 janvier 2023 à 12:25:30

Salut,

Je ne sais pas quel est ton navigateur, mais il me semble que collapse est pas supporte par chrome et agit comme hidden.

gcyrillus

28 janvier 2023 à 21:07:59

Bonsoir,

Comme tu utilises des class sur tes éléments à cacher, tu peut simplement faire un display:none sur ces class sans en passer par <col> . Comme suggerer plus haut par Domi65

CSS que tu peut tester sur le code de abcabc6 en place de celui qu'il propose basé sur <col> (qui peut accessoirement te servir à colorer une colonne sur deux par exemple)

        table {
            margin: auto;
            vertical-align: middle; 
        }
 
        table.liste {
            margin-top: 1em;
            border-collapse: collapse;
            border: 1px solid silver;
        }
 
        .liste  :is(td,th) {
            border-collapse: collapse;
            border: 1px solid silver;
            padding: 5px;
        }
 
        .liste  th {
            border-color: black;
            background-color: #84898F;
            color: white;
        }
 
        @media screen and (max-width:780px) {
            .salle,.organisateur {
                display:none;
            }
        }

Cdt

-
Edité par gcyrillus 29 janvier 2023 à 16:16:48

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Domi65

29 janvier 2023 à 11:49:44

« tu peut simplement faire un display:none »

C'est ce que j'ai proposé plus haut, sans faire l'unanimité, c'est un euphémisme.

gcyrillus

29 janvier 2023 à 16:10:59

Domi65 a écrit:

« tu peut simplement faire un display:none »

C'est ce que j'ai proposé plus haut, sans faire l'unanimité, c'est un euphémisme.

Effectivement, mais succinctement , puis noyé par un post plus conséquent qui, a de plus, rappeler l'usage de colgroup/col . Mon intervention était sur ce point, bien qu’intéressant et généralement peu connu, col ici n'est pas nécessaire au vu du code de delher qui explicitement donne un CSS classé , puis son code qui injecte bien ces class.

Bon, sinon curieux de savoir si son problème est réglè

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Delher

30 janvier 2023 à 11:08:29

Bonjour,

J'ai essayé et malheureusement ça ne fonctionne pas, les colonnes demeurent, le code complet d'essai

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>test3</title>

<style>
table {
margin: auto;
vertical-align: middle;
}
table.liste {
margin-top: 1em;
border-collapse: collapse;
border: 1px solid silver;
}
.liste :is(td,th) {
border-collapse: collapse;
border: 1px solid silver;
padding: 5px;
}
.liste th {
border-color: black;
background-color: #84898F;
color: white;
}
 
@media screen and (max-width:780px) {
.salle,.organisateur{
display:none;
}

}   
</style>

</head>

<body>
<table class="liste">

<tr>
<th>Flyer</th>
<th>date</th>
<th>heure</th>
<th>lieu</th>
<th class='salle'>Salle</th>
<th class='organisateur'>organisateur</th>
<th>prix</th>
</tr>
<tr>
<td></td>
<td>26/01</td>
<td>14:00</td>
<td>Roquebrune sur argens</td>
<td class='salle'>Jean Moulin</td>
<td class='organisateur'>Jean françois</td>
<td>Gratuit</td>
</tr>
</table>
</body>
</html>

Cdt

gcyrillus

30 janvier 2023 à 15:26:04

Bonjour,

En replaçant ton code dans un fiddle : https://jsfiddle.net/yasqz51x/ on peut constater que cela fonctionne en ligne.

As tu un soucis de cache non vidé par ton navigateur ?

Est tu certains d'avoir redimensionné ta fen^tre de navigateur en dessous des 780px du point de rupture dans le code ?

Quel navigateur utilises tu ?

Cdt

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Delher

31 janvier 2023 à 8:38:38

Bonjour,

Effectivement ça fonctionne parfaitement.
Je n'avais testé qu'en local, je suppose donc que je n'avais pas "raffraichi" correctement FF.

Merci à tous de m'avoir accordé un peu de votre temps

Domi65

31 janvier 2023 à 11:51:49

Bon, donc, finalement, c'est bien le bon vieux display: none qui fonctionne, ou il y a quelque chose que je n'ai pas compris ?