web-dev-qa-db-fra.com

Pourquoi la largeur de ma cellule de tableau est-elle incorrecte dans Chrome?

J'ai une table avec deux rangées. La première ligne ne comporte que trois cellules. La deuxième ligne a deux cellules, la première cellule contenant un autre tableau qui doit remplir la cellule entière.

<table border="1" style="border-collapse:collapse;">
    <tr>
        <td style="WIDTH: 205px;">1</td> <!--This width doesn't apply in Chrome-->
        <td style="width:100%;">2</td>
        <td style="WIDTH: 5px;">3</td>
    </tr>                

    <tr>
        <td colspan="2">

                <TABLE width="100%" border="1" style="border-collapse:collapse;table-layout: fixed;">
                    <TR>
                        <TD style="width:130px;">
                            A</TD>
                        <TD style="width:90px;">
                            B</TD>
                        <TD style="width:230px;">
                           C</TD>
                    </TR>

                </TABLE>        
        </td>
        <td>
            D
        </td>
    </tr>
</table>

Assez simple, vraiment ... ou du moins je le pensais.

Il apparaît comme je m'y attendais dans IE. Mais Chrome ne semble pas appliquer correctement la largeur de la première cellule. Il semble être affecté par le tableau de la cellule ci-dessous.

enter image description here

Pourquoi cela se produit-il et comment puis-je contourner ce problème?

htmlgoogle-chromelayoutwidthhtml-table
23
Urbycoz

Vous devez faire deux choses:

  • Sur l'élément table, utilisez table-layout: fixed;
  • Insérez des colonnes et donnez-leur une largeur
    • (Vous pouvez également attribuer une largeur aux en-têtes/cellules du tableau de la première ligne)

Comme ça:

<table border="1" style="table-layout: fixed; width: 100%;">
    <colgroup>
        <col style="width: 205px;">
        <col style="width: auto;">
          <!-- Use "width: auto;" to apply the remaining (unused) space -->
        <col style="width: 5px">
    </colgroup>

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr> 

    <!-- Etc. -->
51
Richard de Wit