Posted By

sullei on 08/27/08


Tagged

css media 3 queries


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

sullei
SpinZ
titox
Hollow
jackkeller
michellebracken


HTML CSS media query


 / Published in: HTML
 

URL: http://sulleii.googlepages.com/media-queries-css-svg-html.htm

CSS 3 media queries test for html, table columns disappear when browser window width is changed; Fx 3.1

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>HTML CSS media queries test</title>
  5. <meta name="keywords" content="css, html, media queries, css3" />
  6. <meta name="description" content="Test CSS 3 media queries dla html" />
  7.  
  8.  
  9. table{ width: 100%}
  10.  
  11.  
  12.  
  13. table td:nth-of-type(1){
  14. background: blue;
  15. color: white;
  16. }
  17.  
  18.  
  19.  
  20. table td:nth-of-type(2){
  21. background: red
  22. }
  23.  
  24. table td:nth-of-type(3){
  25. background: green;
  26. color: white
  27.  
  28. }
  29.  
  30.  
  31. table td:nth-of-type(4){
  32. background: yellow;
  33. }
  34.  
  35.  
  36. @media screen and (max-width: 510px){
  37. table td:nth-of-type(4){
  38. display: none;
  39. }
  40. }
  41.  
  42. @media screen and (max-width: 383px){
  43. table td:nth-of-type(3){
  44. display: none;
  45. }
  46. }
  47.  
  48. @media screen and (max-width: 281px){
  49. table td:nth-of-type(1){
  50. display: none;
  51. }
  52. }
  53.  
  54.  
  55. </head>
  56.  
  57. <table border="1" summary="Znikająca tabela">
  58. <caption>The znikająca tabelka</caption>
  59.  
  60. <tr><th>Ta nie znika</th><td>Znikam przy 281px szerokości</td><td>Nie znikam wogóle</td><td>Znikam przy 384px szerokości</td><td>Znikam przy 510px szerokości</td></tr>
  61. <tr><th scope="row">wrwerw</th><td>wewe</td><td>wewrwerwer</td><td>werwer</td><td>werw erwrwrewre</td></tr>
  62. <tr><th scope="row">werwer</th><td>e</td><td>werwrew</td><td>weerwe</td><td>werwrewe</td></tr>
  63.  
  64. <tr><th scope="row">werwe</th><td>werrrwrerw</td><td>werwer</td><td>werwrwrwrwre</td><td>werwrewe</td></tr>
  65. <tr><th scope="row">wrewerw</th><td>ewrewre</td><td>we</td><td>wwrwer</td><td>rewerwrrwwe</td></tr>
  66.  
  67.  
  68.  
  69. </body>
  70. </html>

Report this snippet  

You need to login to post a comment.