Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > HTML

Table HTML responsive

Nom Nationalité Date création
Chevrolet États-Unis 1911
Citroën France 1919
Dodge USA 1914
Fiat Italie 1899
Ford USA 1903
Honda Japon 1948
Lancia Italie 1906
Opel Allemagne 1899
Peugeot France 1896
Renault France 1898
Seat Espagne 1950

Code :

HTML


<table>
<thead>
<tr>
<th>Nom</th>
<th>Nationalité</th>
<th>Date création</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Nom">Chevrolet</td>
<td data-title="NationalitĂ©">États-Unis</td>
<td data-title="Date création">1911</td>
</tr>
<tr>
<td data-title="Nom">Citroën</td>
<td data-title="Nationalité">France</td>
<td data-title="Date création">1919</td>
</tr>

...

</tbody>
</table>


CSS


table{
	
margin: 1rem auto;
text-align: center;
width: 100%;
max-width: 100%;
border-collapse: collapse;
border: 1px solid

}
		
	
thead{

background-color: purple;
color: white

}
	

th,td{padding:8px 0}

tbody tr:nth-child(even) {
	
background-color: #ddd
	
}
	
@media only screen and (max-width: 800px) {
		
table, 
thead, 
tbody, 
th, 
td, 
tr{ 
	
display: block
	
}
	
thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}
 
 
 
td { 
	
position: relative;
padding-left: 50%; 
white-space: normal;
text-align: left
	
	}
 
td:before { 
	
position: absolute;
top: 6px;
left: 6px;
width: 45%; 
padding-right: 10px; 
font-weight: bold;
white-space: nowrap;
text-align:left;
content: attr(data-title)
	
	}
}



Source, inspiration, ressources :

Lire cet article sur le sujet.

Vous rencontrez un problÚme avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.