Fixer la largeur des colonnes d'un tableau

**JackFinick** · 30/09/2014, 22h21

Bonjour,

Pb pour fixer la largeur des colonnes

Voici mon script complet : page.php et styles.css

La table se construit dynamiquement avec PHP

Les tailles des colonnes sont fixées par les classes col1_4 et col5

page.php

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML lang="fr-fr">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META http-equiv="Content-Language" content="fr" />
<TITLE>informatique</TITLE>
<LINK title="Feuille de styles CSS" rel="stylesheet" href="styles.css"
    type="text/css" />
<LINK rel="shortcut icon" href="images/favicon.ico" /> 
<STYLE type="text/css">
</STYLE>
</HEAD>
<BODY>   
<div id="header">
    <P class="position">header</P>
</div>
<div id="corps">
    <div id="left">
    <p class="position">left</p>
    </div> 
    <div id="middle">
    <p class="position">middle</p>
<?php
    echo '<table border="1" class="table1">';
    echo '
    <tr class="tr1">
    <TH class="col1_4">Machine</TH>
    <TH class="col1_4">Code article</TH>
    <TH class="col1_4">D&eacute;signation</TH>
    <TH class="col1_4">PU HT</TH>
    <TH class="col5">Qt&eacute;</TH>
    </tr>';
    //avec while
    $no_ligne = 0;
    while ($no_ligne<=4) //5 lignes
    {
        echo '<tr>';
        $no_colonne = 0;
        while ($no_colonne<=3) //4 colonnes
        {
            echo '<td class="col1_4">';
            echo "l".($no_ligne+1)."c".($no_colonne+1);
            echo '</td>';
            $no_colonne++;
        }
        echo '<td class="col5">'; //+ une colonne
        echo "l".($no_ligne+1)."c5";
        echo '</td>';
        echo '</tr>';
        $no_ligne++;
    }
    echo '</table>';
?>
    </div>
    <div id="right">
        <p class="position">right</p>
    </div>
</div>
<div id="bottom">
    <p class="position">bottom</p>
</div>
</BODY> </HTML>

styles.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
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
65
* {
    margin: 0;
    padding: 0;
}
body {
    width: 1050px;
    margin: 1px auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    /*background-color: #CCFFFF;*/
    /*background-color: #e0dedf;*/
    background-color: #EDEDED;
}
#bottom {
    clear: both;
    width: 1050px;
    height: 5px;
}
.col1_4 {
    /*
    max-width: 30px;
    */
    width: 30px;
}
.col5 {
    /*
    max-width: 20px;
    */
    width: 5px;
}
#corps {
    float: left;
    background-color: #ffffff;
    height: 1050px;
}
#header {
    width: 1050px;
    height: 5px;
}
#left {
    float: left;
    width: 150px;
}
#middle {
    float: left;
    width: 700px;
    /*height: 500px;*/
    background-color: #EDEDED;
    padding-left: 5px;
}
.position {
    font-size: 0.6em;
    color: #FF9966;
}
#right {
    float: left;
    width: 150px;
}
.table1{
    background-color: #00FFFF;
    width: 690px;
    margin:0 auto;
}
.tr1 {
    /*text-align: center;*/
}