28172 sujets

CSS et mise en forme, CSS3

[Résolu] Media query et class

Bonjour à tous,
Pour gérer l'affichage de tableaux pour les écrans de taille inférieur à 400px j'utilise la règle ci-dessous :

@media only screen and (max-width: 400px)  {
  /* Force table to not be like tables anymore */
	table, thead, tbody,
	th, td, tr {
		display: block;
	}

  /* Hide table headers (but not display: none;, for accessibility) */
	thead tr, .head, th {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr {
    /*border: 1px solid #ccc;*/
    /*margin-bottom: 1rem;*/
  }

	td {
		/* Behave  like a "row" */
		/*border: none;
		border-bottom: 1px solid #eee;*/
		position: relative;
		padding-left: 50%;
		white-space: normal;
		text-align:left;
	}

	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}

	/* Label the data */
	td:before { content: attr(data-title); }
}


Ce code n'est initialement pas de moi, je l'ai adapté à mon besoin et en j'utilise knacss.

Mon problème est que pour certain tableau cette règle ne doit pas s'appliquer. J'avoue ne pas trop dans quel sens prendre le problème.
Est-ce que vous auriez une piste ?
Merci d'avance.
Modérateur
Salut

flipflip a écrit :
Mon problème est que pour certain tableau cette règle ne doit pas s'appliquer. J'avoue ne pas trop dans quel sens prendre le problème.

Pour ma part je mettrais une classe spéciale sur tout ce code et sur les table qui doivent réagir comme ça. Comme ca si elle n'est pas présente sur le table le code ne s'applique pas.
Salut,

Merci pour ta réponse.
C'est ici que s'arrête mes connaissances en CSS Smiley decu

a écrit :
Pour ma part je mettrais une classe spéciale sur tout ce code et sur les table

Est-ce que je peux faire un truc dans le genre 

@media only screen and (max-width: 400px) {
.mobile {
  /* Force table to not be like tables anymore */
	table, thead, tbody,
	th, td, tr {
		display: block;
	}
    [...]
}


Et donner la class mobile à mon tableau ?
Modifié par flipflip (15 Sep 2020 - 15:49)
Absolument! Même si un nom de classe plus explicite, comme responsiveTable par exemple, rendra plus aisée la maintenance.
Modérateur
Hello,
Pourquoi avoir un <div> supplémentaire et ne pas assigner la class sur la <table> directement ? Smiley smile
a écrit :
Pourquoi avoir un <div> supplémentaire et ne pas assigner la class sur la <table> directement ? Smiley smile


Je dirais par méconnaissance Smiley decu
Modérateur
Ok, pas de panique rien de grave la dedans Smiley smile
Il y a pour moi deux choses à réfléchir lorsque j'écris de l'HTML:
- Est-ce que c'est j'utilise la bonne balise ?
- Est-ce que je peux rendre ma structure/mon code plus simple ?

De là, tu vas vite supprimer une bonne série de <div>, tu utiliseras des balises plus appropriées (header, nav, footer, b, abbr, address, ol, dl, table…) bref ce qui est représentatif pour le contenu et ensuite tu verras que ça te simplifiera la vie et tu gagneras en lisibilité, et en efficacité pour tes styles Smiley smile
Merci pour tes conseils.
Effectivement j'ai commencé à utiliser les balises header, nav, section mais parfois les mauvaises habitudes sont rebelles.
Je dois m'y prendre comme un pied mais je ne comprends pas pourquoi cela ne marche pas :

@media only screen and (max-width: 400px) {
	.mobileTable {
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		}

		 /* Hide table headers (but not display: none;, for accessibility) */
		thead tr, .head, th {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

		tr {
		   /*border: 1px solid #ccc;*/
		   /*margin-bottom: 1rem;*/
		 }

		td {
			/* Behave  like a "row" */
			position: relative;
			padding-left: 50%;
			white-space: normal;
			text-align:left;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
			text-align:left;
			font-weight: bold;
		}

		/*	Label the data */
		td:before { content: attr(data-title); }
	}
}


<div class="grid-1 ptl pbl">
	<table id="recherche" class="mobileTable table--zebra">
		<thead class="txtcenter">
			<tr>
				<th scope="col">Référence</th>
				<th scope="col">Gencod</th>
				<th scope="col" class="txtleft">Désignation</th>
				<th>Action</th>
			</tr>
		</thead>
		[...]
	</table>
</div>


Avec ce code les règles ne s'appliquent pas et le debugger firefox m'annonce

upload/1600250748-57230-capturedancrandu2020-09-1612-.png

Et les petits triangles : nom de propriété invalide.
Modifié par flipflip (16 Sep 2020 - 12:07)
Heu... un peu oui.

En fait .mobileTable est déjà la balise table donc là en l'état le display block ne s'applique pas vue que vous ciblez la table inclue dans la table.
Là il y a quiproquo. Je ne remets pas en question le conseil avisé de Yordi mais votre déclaration Css.

Lorsque vous désignez ".mobileTable table" vous ciblez la table dans la table.mobileTable.

En fait votre première déclaration devrait être ainsi:
.mobileTable {
		/* Force table to not be like tables anymore */
		thead, tbody, th, td, tr {/* <== ici j'ai viré table */
			display: block;
		}

avec bien sûr
<table class="mobileTable">...</table>
Modérateur
Salut,

juste au passage, on est d'accord que :
.mobileTable {
		thead, tbody, th, td, tr {

		}
}

C'est du SASS pas du CSS hein... sinon il faut écrire
.mobileTable thead,
.mobileTable tbody,
.mobileTable th,
.mobileTable td,
.mobileTable tr {

}

:D ou alors j'ai loupé un wagon et vous parlez bien de sass mais vu ce que sort l’inspecteur de code....
Modifié par _laurent (16 Sep 2020 - 14:36)
Ha ouais bien vu, je n'avais regardé l'inspecteur de code. Le fichier de sortie est un css donc il est censé être compilé...
Hum.... ça sent le sac de nœuds à plein nez.
Modifié par Greg_Lumiere (16 Sep 2020 - 14:45)
a écrit :
C'est du SASS pas du CSS hein... sinon il faut écrire

Non de mon côté c'est du CSS.
Modérateur
Bonjour,

flipflip a écrit :
Non de mon côté c'est du CSS.


En css pur, la syntaxe correcte est celle indiquée par _laurent.

On ne peut pas écrire .mobileTable { thead, tbody, th, td, tr { ... } }

Amicalement,
Merci à tous pour votre aide. Ci-dessous le code qui va bien... On est pas à l'abris que cela soit utile à d'autres.

/* ---------------------------------------
   Gestion des tableaux pour un affichage
	 sur smartphone
----------------------------------------- */
@media only screen and (max-width: 400px) {
	/* Force table to not be like tables anymore */
	.mobileTable thead, .mobileTable tbody,
	.mobileTable th, .mobileTable td, .mobileTable tr {
		display: block;
	}

	 /* Hide table headers (but not display: none;, for accessibility) */
	.mobileTable thead tr, .mobileTable .head, .mobileTable th {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.mobileTable tr {
	   /*border: 1px solid #ccc;*/
	   /*margin-bottom: 1rem;*/
	 }

	.mobileTable td {
		/* Behave  like a "row" */
		/*border: none;
		border-bottom: 1px solid #eee;*/
		position: relative;
		padding-left: 50%;
		white-space: normal;
		text-align:left;
	}

	.mobileTable td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}

	/*	Label the data */
	.mobileTable td:before { content: attr(data-title); }
}


<table id="recherche" class="mobileTable table--zebra">
	<thead class="txtcenter">
		<tr>
			<th scope="col">Référence</th>
			<th scope="col">Gencod</th>
			<th scope="col" class="txtleft">Désignation</th>
			<th>Action</th>
		</tr>
	</thead>
	[...]
Meilleure solution
Sujet clos
Aller à