Posted By

sullei on 08/27/08

Tagged

Versions (?)

Last Edited at 08/27/08 05:49am

Statistics

Viewed 776 times

Favorited by 2 user(s)

Related snippets

HTML CSS media query

/ Published in: HTML

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<!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>