Advanced Search

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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" />

<style>

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;
	}
}


</style>
</head>
<body>

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

<thead>
<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>
</thead>
<tbody>
<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>
</tbody>
</table>



</body>
</html>
Initial URL 
http://sulleii.googlepages.com/media-queries-css-svg-html.htm
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 
HTML