web-dev-qa-db-fra.com

problème de largeur de colspan

J'ai du mal à définir des largeurs fixes sur les colonnes qui utilisent colspan.

Il semble que ni IE8, Firefox ni Chrome ne peut pas savoir comment dimensionner correctement les colonnes avec colspan.

Essayez le code suivant pour voir le problème en action:

<h2>One table with colspans, incorrect cell dimensions</h2>
<table border="1">
<tr>
    <td style="width:20px;">20</td>
    <td style="width:50px;" colspan="2">50</td>
    <td>a</td>
    <td>a</td></tr>
<tr>
    <td style="width:50px;" colspan="2">50</td>
    <td style="width:20px;">20</td>
    <td>a</td>
    <td>a</td></tr>
</table>

<h2>Split tables, correct cell dimensions</h2>
<table border="1">
<tr>
    <td style="width:20px;">20</td>
    <td style="width:50px;">50</td>
    <td>a</td>
    <td>a</td></tr>
</table>
<table border="1">
<tr>
    <td style="width:50px;">50</td>
    <td style="width:20px;">20</td>
    <td>a</td>
    <td>a</td></tr>
</table>

Quelqu'un peut-il expliquer pourquoi cela pourrait se produire et s'il existe une solution de contournement.

ÉDITER:

ont essayé des doctypes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
htmlcsshtml-table
24
pstanton

Parce que les largeurs de vos colonnes sont contradictoires. Dans la ligne 1, vous avez des largeurs de colonnes 20, 50/2; dans la ligne 2, vous avez des largeurs de colonne 50/2, 20.

Row 1, Column 1 is defined as 20.
Row 1, Column 2 is defined as 50.
Row 2, Column 1 is defined as 50.
Row 2, Column 2 is defined as 20.

Vous ne pouvez pas avoir de colonnes de chevauchement de différentes largeurs, les cellules du tableau doivent s'aligner. Vous essayez de dessiner ce tableau:

|-----|----------|
|----------|-----|

Ce qui n'est pas valide car les colonnes ne s'alignent pas. Pour ce faire, vous devez ajouter plus de colonnes:

|-----|----.-----|
|-----.----|-----|

Où "." est une colonne masquée par l'étendue de la colonne. Essayez ce HTML:

<!DOCTYPE HTML>

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <table border="1" style="table-layout: fixed;">
            <colgroup>
                <col style="width: 20px;"/>
                <col style="width: 30px;"/>
                <col style="width: 20px;"/>
            </colgroup>
            <tbody>
                <tr>
                    <td>20</td>
                    <td colspan="2">50</td>
                </tr>
                <tr>
                    <td colspan="2">50</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
30
Josh M.

Cela a à voir avec la façon dont les navigateurs calculent les largeurs pour chaque colonne. Les tableaux nécessitent plus de frais généraux en raison de leur nature flexible et plus d'un passage en fonction des dimensions que vous définissez et du contenu.

Pour faire court, colspan sur la première ligne lorsque vous souhaitez définir des largeurs de colonne sur les lignes suivantes résume les travaux. Il existe de nombreuses bonnes façons de le réparer, une mauvaise façon, mais il serait facile d'avoir la toute première ligne avec 1 pixel de hauteur définissant la tendance des largeurs de colonne.

4
SynBiotik