Mise en forme de tableau

**regweb** · 11/02/2014, 21h56

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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%;}

Invité · 11/02/2014, 23h28

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 ?

**regweb** · 12/02/2014, 22h12

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.

Invité · 13/02/2014, 09h31

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>