Mise en forme de tableau

bonjour à tous,
dans le code ci-dessous, je souhaite imposer des largeurs différentes aux colonnes de mon tableau, tout en occupant au total 100% de la largeur de l'écran.
Dans le code css qui ci-dessous, j'utilise (table-layout: fixed) pensant que ce serait le remède miracle. La largeur de mes colonnes est en % pour un total de 100%. Dans le cas présent le tableau n'occupe pas toute la largeur, si j'ajoute (width: 100%) mon tableau occupe bien cette fois-citoute la largeur mais n'obéit plus à la commande table-layout:fixed, mes colonnes sont toutes de même largeur. Je ne trouve pas la solution .... merci.

ci-dessous tableau.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="fr">
<head>
		<link rel="stylesheet" href="tableau.css" media="screen">		
</head> 
<body>
 
	<hr />
<table id="tableau-general">
	 <tr><td colspan="15" class="ligne_entete" > Engagement No 656787 du 18/12/2013</td></tr>
		<tr>
			<td class="col_pdf  nom_col">PDF</td>
			<td class="col_doc  nom_col">DOC</td>
			<td class="col_fournisseur nom_col">Fournisseur</td>
			<td class="col_soustraitant nom_col">Sous-Traitant</td>
			<td class="col_objet nom_col">Objet de la demande</td>
			<td class="col_lieu nom_col">Lieu</td>
			<td class="col_TTC  nom_col">Montant HT</td>
			<td class="col_HT nom_col">Montant TTC</td>
			<td class="col_CF  nom_col">CF</td>
			<td class="col_EOTP nom_col">EOTP</td>
			<td class="col_date_RC  nom_col">valid RR</td>
			<td class="col_date_SIFAC  nom_col">Date SIFAC</td>
			<td class="col_marche  nom_col">CMD/marché</td>
			<td class="col_date_SG nom_col">Date SG</td>
			<td class="col_date_SCMD nom_col">Date envoi</td>
		</tr> 
 
		<tr class='center '>
			<td class="col_pdf center">img1</td>				
			<td class="col_pdf center">img2</td>		
			<td class="col_fournisseur"> CENTRE TECHNIQUE	</td>
			<td class="col_soustraitant "> dupont </td>
			<td class="col_objet" >essaiessai </td>
			<td class="col_lieu " >nnnnnc</td>
			<td class="col_HT " >hhhhhhh</td>
			<td class="col_TTC" >llllllll</td>
			<td class="col_CF " >2</td>
			<td class="col_EOTP " >65</td>
			<td class="col_date_RC" >HH</td>  
			<td class="col_date_SIFAC" >12/13/14</td>
			<td class="col_marche ">uuulloiuyt</td>
			<td class="col_date_SG">26/01/14</td>
			<td class="col_date_SCMD">3jjjjj01</td>
		</tr>
 		<!--		<tr class="couleur13 ">
					<td > PDF </td>
					<td > DOC </td>
					<td >Date recept Facture</td>
					<td >facture ou situation</td>
					<td >Montant TTC</td>
					<td> --- </td>
					<td >remis CO</td>
					<td >visa CO</td>
					<td >valid RR</td>
					<td > Service Fait </td>
					<td > Paiement Effectif</td>
					<td colspan="2"> Cumul dépenses </td>
					<td colspan="2"> SOLDE </td>
				</tr>
		-->						
	</table>
 </body>
 </html>

ci-dessous tableau.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
body {
  font-family: Arial, Helvetica, FreeSans, sans-serif; 
  font-size: .8em; 
  line-height: 1.4; 
  color: black;
}
table {
margin: 0 auto;
border-collapse:collapse;
border: 0 ;}
 
#tableau-general{
/*width: 100%;*/
table-layout: fixed;
}
td {border:1px solid grey;}
 
.center {text-align: center;}
.col_pdf { width: 3%;}
.col_doc { width: 3%;}
.col_fournisseur { width: 12%;}
.col_soustraitant { width: 9%;}
.col_objet { width: 20%; }
.col_lieu { width: 4%;}
.col_HT { width: 6%;}
.col_TTC { width: 6%;}
.col_CF { width: 4%;}
.col_EOTP { width: 4%;}
.col_date_RC { width: 6%;}
.col_date_SIFAC { width: 6%;}
.col_marche { width: 7%;}
.col_date_SG { width: 5%;}
.col_date_SCMD { width: 5%;}

Bonjour,
j'ai essayé de reproduire le problème ici.
L'instruction de largeur est bien prise en compte.
Sur quel navigateur as-tu testé le code ?

bonjour,
je suis sous firefox dernière version, si je décommente la ligne "table-layout: fixed;" dans le css de #tableau-general, là ca déconne. D'après ce que j'ai lu, table-layout me permet justement d'imposer les largeurs des colonnes indépendamment de leur contenu. merci.

Ah ! Mais il me semble bien que pour utiliser table-layout: fixed; il faut définir des colonnes.
Code:

1 2 3 4 5 6 7 8 9 10 11 <table> <colgroup> <col width="10"/> <col width="20"/> <col width="30"/> <col width="50"/> </colgroup> ... reste du tableau ... </table>
La blague c'est qu'il me semble bien que l’élément <col> est déprécié en HTML5. A vérifier.

effectivement, j'ai vérifié, tu as raison la largeur des colonnes ne peut pas être déclarée en % dans ce cas mais uniquement en px.
MERCI

Bonjour,

Citation:

Envoyé par Mogelijk

La blague c'est qu'il me semble bien que l’élément <col> est déprécié en HTML5. A vérifier.

que nenni :fleche: http://dev.w3.org/html5/markup/col.html#col

Citation:

Envoyé par regweb

MERCI

n'hésite pas à mettre en :resolu:

Ah oui en effet, autant pour moi. Ce sont les attributs qui le sont.

Citation:

The align attribute on the col element is obsolete. Use CSS instead.
The width attribute on the col element is obsolete. Use CSS instead.
The char attribute on the col element is obsolete. Use CSS instead.
The charoff attribute on the col element is obsolete. Use CSS instead.
The valign attribute on the col element is obsolete. Use CSS instead.