[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.

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

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.

Parfait.

Dans l'idée le code html pourrait être ?

<div class="mobile">
  <table>
[...]
</div>

Hello,
Pourquoi avoir un <div> supplémentaire et ne pas assigner la class sur la <table> directement ?

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

Ok, pas de panique rien de grave la dedans
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

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



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.

C'est ce qui me semblais et je l'ai proposé : https://forum.alsacreations.com/topic-4-87496-1-Media-query-et-class.html#p560724 mais Yordi m'a convaincu que c'était pas la bonne solution

J'ai tenté en passant mobileTable sur le div au dessus mais même punition

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>

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.

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,