28216 sujets

CSS et mise en forme, CSS3

Ajustement automatique de la largeur d'une colonne d'un tableau

Bonjour,

je voudrais savoir s'il est possible d'ajuster automatiquement de la largeur d'une colonne d'un tableau par rapport à la largeur total ?

voici mon code html :
<html>
<head>
    <link rel="stylesheet" href="./test.css" type="text/css" media="screen" />
</head>

<body>
   <table cellpadding="0" cellspacing="0" class="table">
	<tr>
		<td class="CoinBG"></td>
		<td class="BasMultibox"></td>
		<td class="SeparationBas"></td>
		<td class="Bas" style="width:200px;"></td>
		<td class="SeparationBas"></td>
		<td class="Bas"  style="width:100px;"></td>
		<td class="SeparationBas"></td>
		<td class="Bas"  style="width:100px;"></td>
		<td class="SeparationBas"></td>
		<td class="Bas" style="width:250px;"></td>
		<td class="CoinBD"></td>
	</tr>
   </table>
</body>

</html>


voici la css associée:
.table{
	width:700px;
	height:15px;
	border-spacing: 0px;
}


.CoinBG{
	width:10px;
	background-color:red;
}
.CoinBD{
	width:12px;
	background-color:red;
}
.SeparationBas{
	width:2px;
	background-color:black;
}
.Bas{
	background-color:blue;
}
.BasMultibox{
	background-color:red;
	width:20px;
}



la largeur de ma table fait 700px et la somme des largeurs de toutes ses colonnes font également 700px Smiley biggrin et donc tout ce passe bien !

la dernière colonne fait 250px de large moi je voudrais ne pas spécifier sa largeur et qu'elle soit automatiquement mise à 250px (étant donner que la largeur de la table est 700px).

Suis-je clair ?? Est-ce possible ??


Merci de votre aide

PoichOU
modifer ton dans ccs comme ceci:
.table{
width:100%;
min-width : 700px;
height:15px;
border-spacing: 0px;
}
j'ai oublié une une ligne:

.table{
 width:100%; 
 min-width : 700px;
 padding-right:100%;
 height:15px;
 border-spacing: 0px;
}
Merci de ton aide nourami

Smiley eek Smiley eek la ligne que tu as oublié est 
padding-right:100%;



comment je peux voir quelque chose si je décale mon tableau de 100% vers la droite ???


et sans cette ligne ça ne marche pas non plus Smiley sweatdrop
Modifié par PoichOU (09 Dec 2005 - 14:43)
essayer ce code:

.table{
 width:100%; 
 _width:700px;
 _padding-right:100%;
 min-width : 700px;
  height:15px;
 border-spacing: 0px;
}
nourami a écrit :
essayer ce code:

.table{
 width:100%; 
 _width:700px;
 _padding-right:100%;
 min-width : 700px;
  height:15px;
 border-spacing: 0px;
}

Smiley confused

Mais qu'est-ce que c'est que ça ? d'où tiens-tu ces underscores (_) ? quel intérêt le border spacing ?
PoichOU a écrit :
Bonjour,

je voudrais savoir s'il est possible d'ajuster automatiquement de la largeur d'une colonne d'un tableau par rapport à la largeur total ?

voici mon code html :
...


voici la css associée:
...


(...)

Suis-je clair ?? Est-ce possible ??


Merci de votre aide

PoichOU

voir balise HTML <colgroup> pour les tableaux qui te permet de définir la largeur de ton tableau en pourcentage de la largeur totale du tableau auquel tu peux affecter une largeur proportionnelle à celle de la page

exemple pour trois colonnes: 

<table width="90%" summary="description de mon tableau">
<colgroup>
<col width="35%" />
<col width="30%" />
<col width="35%" />
</colgroup>
<tr>
<td>première colonne dont la largeur est 35% x 90% = 31,5% de la largeur totale de la page</td>
<td>deuxième colonne</td>
<td>3</td>
</tr>
</table>

Modifié par RomsIW (12 Dec 2005 - 14:15)
(_) interpreté seulement par IE
donc si je fais 

width:100%; 
 _width:700px;

dans Ie width = 700px et pour autre navigateur(mozila par ex) width=100%
et pour cela le code suivant:

 .table{
 width:100%; 
 _width:700px;
 _padding-right:100%;
 min-width : 700px;
  height:15px;
 border-spacing: 0px;
}

pour Ie c'est comme si j'ai :

 .table{
 width:700px; 
 padding-right:100%;
 height:15px;
 border-spacing: 0px;
}

et pour autre que Ie c'est comme si j'ai :


 .table{
 width:100%; 
 min-width : 700px;
  height:15px;
 border-spacing: 0px;
}
Bonjour,

Aucune indication sur l'éventuelle correction du bug de l'underscore n'a été donnée (à ma connaissance) par Microsoft.

Il est donc tout à fait possible qu'IE7:
- continue à lire les _width: 100px
- tout en ayant corrigé par ailleurs le bug CSS qui justifiait l'ajout de cette valeur.

Dans ce cas, l'affichage résultant a fortes chances d'être plus ou moins dégradé.

Il est inutile de fragiliser les feuilles de styles avec ce type de hack CSS : utilisez un commentaire conditionnel.
Sujet clos
Aller à