Return to Snippet

Revision: 8021
at August 27, 2008 05:49 by sullei

Initial Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML CSS media queries test</title>
<meta name="keywords" content="css, html, media queries, css3" />
<meta name="description" content="Test CSS 3 media queries dla html" />


table{ width: 100%}

table td:nth-of-type(1){
background: blue;
color: white;

table td:nth-of-type(2){
background: red

table td:nth-of-type(3){
background: green;
color: white


table td:nth-of-type(4){
		background: yellow;

@media screen and (max-width: 510px){
	table td:nth-of-type(4){
		display: none;

@media screen and (max-width: 383px){
	table td:nth-of-type(3){
		display: none;

@media screen and (max-width: 281px){
	table td:nth-of-type(1){
		display: none;


<table border="1" summary="ZnikajÄ…ca tabela">
<caption>The znikajÄ…ca tabelka</caption>

<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>
<tr><th scope="row">wrwerw</th><td>wewe</td><td>wewrwerwer</td><td>werwer</td><td>werw erwrwrewre</td></tr>
<tr><th scope="row">werwer</th><td>e</td><td>werwrew</td><td>weerwe</td><td>werwrewe</td></tr>

<tr><th scope="row">werwe</th><td>werrrwrerw</td><td>werwer</td><td>werwrwrwrwre</td><td>werwrewe</td></tr>
<tr><th scope="row">wrewerw</th><td>ewrewre</td><td>we</td><td>wwrwer</td><td>rewerwrrwwe</td></tr>


Initial URL

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

Initial Title
HTML CSS media query

Initial Tags
css, 3

Initial Language