Fixer la largeur des cellules d'une TABLE

Version imprimable

2 pièce(s) jointe(s)

Bonjour,
Je cale sur un problème de largeur de cellules. Voilà mon code et le résultat ci-dessous.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table border=1 width=50%>
    <tr>
        <tr>
            <th rowspan="2" width=12%>&nbsp</th>
            <th rowspan="2" width=12%>&nbsp</th>
            <th>L1C1</th>
            <th>L1C2</th>
            <th>L1C3</th>
            <th>L1C4</th>
            <th rowspan="2" width=12%>&nbsp</th>
            <th rowspan="2" width=12%>&nbsp</th>
        </tr>
        <tr>
            <th>L2C1</th>
            <th>L2C2</th>
            <th>L2C3</th>
        </tr>
    </tr>
</table>

Pièce jointe 656847

Quand je paramètre les largeurs de chaque cellule, ce sont les largeurs les plus grandes qui prennent le pas sur les autres.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table border=1 width=50%>
    <tr>
        <tr>
            <th rowspan="2" width=12%>&nbsp</th>
            <th rowspan="2" width=12%>&nbsp</th>
            <th width=13%>L1C1</th>
            <th width=13%>L1C2</th>
            <th width=13%>L1C3</th>
            <th width=13%>L1C4</th>
            <th rowspan="2" width=12%>&nbsp</th>
            <th rowspan="2" width=12%>&nbsp</th>
        </tr>
        <tr>
            <th width=26%>L2C1</th> <!--   même problème     -->
            <th width=13%>L2C2</th> <!--   si je mets 3x 33%  -->
            <th width=13%>L2C3</th> <!--   3x 33%                 -->
        </tr>
    </tr>
</table>

Pièce jointe 656848

Mon objectif est que les 3 cellules de la ligne L2 occupent la même largeur que les 4 cellules de la ligne L1.
Savez-vous comment modifier mon code pour y parvenir svp ? Merci.

1 pièce(s) jointe(s)

Voilà la solution

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
<table border=1 width=70%>
    <tr>
        <th width=8%>&nbsp</th>
        <th width=8%>&nbsp</th>
        <th width=32%>
            <table border=1 width=100%>
                <tr>
                    <th width=25%>L1C1</th>
                    <th width=25%>L1C2</th>
                    <th width=25%>L1C3</th>
                    <th width=25%>L1C4</th>
                </tr>
            </table>
            <table border=1 width=100%>
                <tr>
                    <th width=60%>L2C1</th>
                    <th width=30%>L2C2</th>
                    <th width=10%>L2C3</th>
                </tr>
            </table>
        </th>
        <th width=8%>&nbsp</th>
        <th width=8%>&nbsp</th>
        <th width=8%>&nbsp</th>
    </tr>
</table>

Pièce jointe 656850

07/07/2024, 18h49
mathieu

regardez aussi le modèle d'affichage flex qui permet de faire cela avec du code html plus simple :
https://developer.mozilla.org/fr/doc...ble_box_layout
08/07/2024, 08h39
Stellar7

Bonjour,

Juste une remarque : les tableaux imbriqués sont une catastrophe pour l'accessibilité.
Si cela garde du sens, la proposition d'explorer le flex me semble intéressante.

bonne journée