Page 1 sur 1

Tableau 'responsive' personnalisé

Posté : 20 oct. 2014, 17:04
par ojal
Bonjour,

Je souhaite créer un tableau à 2 colonnes.
Le tableau fera maxi 768px de largeur et sera centré.
Si le média accédant nécessite de reduire la largeur de la page, alors le tableau doit adapter sa largeur à la largeur maxi possible
La seconde colonne devra avoir une largeur fixe de 80 px.
La première colonne devra s'adapter...
<table>
	<tr class="encadre"> 
		<td class="gauche">
		Contenu colonne gauche
		</td>		
			
		<td class="droite">
		Contenu colonne droite
		</td>		
			
	</tr>

</table>
Et le css
#containeur{
	  max-width:768px;
	  margin-left: auto;
	  margin-right: auto;
	}
	
td.gauche {
    /*width:686px;*/ /*Changer celà*/
	/*max-width:686px;*/
	text-align: left;
	font-size: 18px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}

td.droite {
    width: 150px;
	text-align: right;
	font-size: 18px;
	padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
}	
Si je donne une largeur à la première colonne, lorsque la largeur passe en dessous de 768px, les 3 colonnes réduisent proportionnellement...

Si je ne donne pas de largeur à la première colonne, le tableau ne s'étale pas sur les 768px comme souhaité...

Quelle solution vous saute aux yeux ??? :)

Merci d'avance :)