CSS 3 bonne utilisation du not pour usage adaptatif

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : CSS 3 bonne utilisation du not pour usage adaptatif

Aurelienazerty

Bonjour,

Je cherche à faire une version mobile adaptative pour mon site et se pose la question des tableaux, dans certains (90%) cas je souhaites qu'ils soient adaptatifs le reste (10%) non.

J'ai utilisé la CSS3 suivante :

Code :

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table:not(.forTable), thead:not(.forTable), tbody:not(.forTable), th:not(.forTable), td:not(.forTable), tr:not(.forTable) {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
table:not(.forTable) thead tr:not(.forTable) {
position: absolute;
top: -9999px;
left: -9999px;
}
td:not(.forTable) {
/* Behave like a "row" */
position: relative;
}
td:not(.forTable):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;
}
}

et donc pour les tableaux que je souhaites voir apparaitre normalement je fais

Code :

<table class="forTable">
<tbody class="forTable">
<tr class="forTable">
<th class="forTable">XXXX</th>
<td class="forTable">YYYYY</td>
</tr>
<tr class="forTable">
<th class="forTable">ZZZZZ</th>
<td class="forTable">AAAAAl</td>
</tr>
<tr class="forTable">
<th class="forTable">BBBBB</th>
<td class="forTable">CCCCCC</td>
</tr>
<tr class="forTable">
<td class="forTable" colspan="2">Long</td>
</tr>
</tbody>
</table>

Ceci est un exemple, mais notez l'obligation de devoir mettre un

Code :

class="forTable"

partout.

Idéalement ça serait mieux d'avoir un code HTML :

Code :

<table class="forTable">
<tbody>
<tr>
<th>XXXX</th>
<td>YYYYY</td>
</tr>
<tr>
<th>ZZZZZ</th>
<td>AAAAAl</td>
</tr>
<tr>
<th>BBBBB</th>
<td>CCCCCC</td>
</tr>
<tr>
<td colspan="2">Long</td>
</tr>
</tbody>
</table>

Mais du coup comment écrire la CSS correspondante ?

Message édité par Aurelienazerty le 15-01-2014 à 21:40:08

---------------
http://lan.team-azerty.com, LAN fun en Rhône-Alpes

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

CSS 3 bonne utilisation du not pour usage adaptatif

Sujets relatifs
[CSS / Wordpress] Modification de la barre de menu	[HTML/CSS]** HEEEELP PLEASE Comment retirer un pied de page en CSS ??
Menu CSS bouge si changement de résolution d'écran ou zoom	Trouver la bonne série de nombres pour un résultat donné
Menu HTML/CSS	[CSS] Cacher / afficher ligne tableau
3 boutons CSS dans la même page	[CSS]Comment bouger mon menu ?
Besoin d'aide pour HTML/CSS	CSS pour les nuls
Plus de sujets relatifs à : CSS 3 bonne utilisation du not pour usage adaptatif

Page générée en 0.049 secondes