CSS 3 bonne utilisation du not pour usage adaptatif

CSS 3 bonne utilisation du not pour usage adaptatif - HTML/CSS - Programmation

Marsh Posté le 15-01-2014 à 21:28:57    

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 :
  1. @media
  2. only screen and (max-width: 760px),
  3. (min-device-width: 768px) and (max-device-width: 1024px)  {
  5. /* Force table to not be like tables anymore */
  6. table:not(.forTable), thead:not(.forTable), tbody:not(.forTable), th:not(.forTable), td:not(.forTable), tr:not(.forTable) {
  7.  display: block;
  8. }
  10. /* Hide table headers (but not display: none;, for accessibility) */
  11. table:not(.forTable) thead tr:not(.forTable) {
  12.  position: absolute;
  13.  top: -9999px;
  14.  left: -9999px;
  15. }
  17. td:not(.forTable) {
  18.  /* Behave  like a "row" */
  19.  position: relative;
  20. }
  22. td:not(.forTable):before {
  23.  /* Now like a table header */
  24.  position: absolute;
  25.  /* Top/left values mimic padding */
  26.  top: 6px;
  27.  left: 6px;
  28.  /*width: 45%; */
  29.  padding-right: 10px;
  30.  white-space: nowrap;
  31. }
  33. }

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

Code :
  1. <table class="forTable">
  2. <tbody class="forTable">
  3.  <tr class="forTable">
  4.   <th class="forTable">XXXX</th>
  5.   <td class="forTable">YYYYY</td>
  6.  </tr>
  7.  <tr class="forTable">
  8.   <th class="forTable">ZZZZZ</th>
  9.   <td class="forTable">AAAAAl</td>
  10.  </tr>
  11.  <tr class="forTable">
  12.   <th class="forTable">BBBBB</th>
  13.   <td class="forTable">CCCCCC</td>
  14.  </tr>
  15.  <tr class="forTable">
  16.   <td class="forTable" colspan="2">Long</td>
  17.  </tr>
  18. </tbody>
  19. </table>

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

Code :
  1. class="forTable"

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

Code :
  1. <table class="forTable">
  2. <tbody>
  3.  <tr>
  4.   <th>XXXX</th>
  5.   <td>YYYYY</td>
  6.  </tr>
  7.  <tr>
  8.   <th>ZZZZZ</th>
  9.   <td>AAAAAl</td>
  10.  </tr>
  11.  <tr>
  12.   <th>BBBBB</th>
  13.   <td>CCCCCC</td>
  14.  </tr>
  15.  <tr>
  16.   <td colspan="2">Long</td>
  17.  </tr>
  18. </tbody>
  19. </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
Reply

Marsh Posté le 15-01-2014 à 21:28:57   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed