Guillaume Duverger - Développement & Graphisme - Blog

Table HTML responsive

Code :

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

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