web-dev-qa-db-fra.com

Problème de largeur de cellule de tableau dans Internet Explorer 8 avec le jeu de colspan

J'ai la page HTML suivante: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>A title</title>
</head>
<body>
    <table style="width: 700px; border: solid 1px green">
        <tr>
            <td style="border: solid 1px red;" colspan="2">A cell with a bunch of text.  The amount of text here increases the 'x' cell.<td>
        </tr>
        <tr>
            <td style="width: 100px; border: solid 1px purple;" >x</td>
            <td style="border: solid 1px blue;">Some sample text</td>
        </tr>
    </table>
</body>
</html>

Dans tous les navigateurs autres qu'Internet Explorer (8), la cellule avec le contenu "x" a une largeur de 100 pixels et la cellule adjacente remplit le reste du tableau. Dans Internet Explorer 8, il est un peu plus gros et sa taille varie en fonction de la quantité de texte dans la cellule avec colspan = "2". Existe-t-il un correctif pour ce bogue dans IE?

htmlcssinternet-explorer
42
Luke

Voici mon résultat pour échoué td width dans IE8:

<table style="width: 100%;" border="1">
  <tr>
    <td style="width:auto;">td1</td>
    <td style="width:15px;">td2</td>
    <td style="width:20px;">td3</td>
  </tr>
  <tr>
    <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
  </tr>
</table>

<!-- IE8 HACK  100% WIDTH -->
<table style="width: 100%;" border="1">
  <tr>
    <td style="width:100%;">td1</td>
    <td style="width:15px;">td2</td>
    <td style="width:20px;">td3</td>
  </tr>
  <tr>
    <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
  </tr>
</table>
13
Libor Skočík

Ok, c'est de la pure folie. La réponse de Ray a fonctionné pour le test initial, mais pas pour mon exemple réel, ce qui m'a amené à créer un deuxième scénario de test avec le correctif de Ray:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>title</title>
</head>
<body> 

<form>

    <table style="width: 700px;">
        <tr>
            <td colspan="2">Here is some really long text.  For some reason, in internet Explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why.  Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
        </tr>
        <tr>
            <td style="width:100px; background: green;"><input type="checkbox" value="1" /></td>
            <td style="width:600px;">blah</td>
        </tr>
    </table>

    <table style="width: 700px;" border="0">
        <tr>
            <td colspan="2">Some short text</td>
        </tr>
        <tr>
            <td style="width: 100px; background: red;"><input type="checkbox" value="1" /></td>
            <td style="width: 600px;">blah</td>
        </tr>
    </table>

</form>

</body>
</html>

Pour une raison quelconque, le fait de disposer des éléments en entrée dans la première cellule du tableau empêche la solution de Ray de fonctionner correctement. 

La solution qui a fini par résoudre le cas réel que nous essayions de résoudre nécessitait l'ajout de "tableau-layout: fixed" aux tableaux et la création de la première ligne du tableau avec des cellules vides avec la largeur définie. Voici une version modifiée de l'exemple précédent avec le correctif que je viens de décrire:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>title</title>
</head>
<body> 

<form>

    <table style="table-layout: fixed; width: 700px;">
        <tr>
            <td style="width: 100px;"></td>
            <td style="width: 600px;"></td>
        </tr>
        <tr>
            <td colspan="2">Here is some really long text.  For some reason, in internet Explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why.  Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
        </tr>
        <tr>
            <td style="background: green;"><input type="checkbox" value="1" /></td>
            <td>blah</td>
        </tr>
    </table>

    <table style="width: 700px; table-layout: fixed;" border="0">
        <tr>
            <td style="width: 100px;"></td>
            <td style="width: 600px;"></td>
        </tr>
        <tr>
            <td colspan="2">Some short text</td>
        </tr>
        <tr>
            <td style="background: red;"><input type="checkbox" value="1" /></td>
            <td>blah</td>
        </tr>
    </table>

</form>

</body>
</html>

Vraiment Internet Explorer ??? VRAIMENT?

23
Luke

La réponse de Luke avec "table-layout: fixed" est ce qui l'a finalement fait pour moi. Sans "table-layout: fixed", IE a continué d'ignorer les déclarations de largeur explicites pour les cellules non colspan. Avec elle, tout fonctionnait, même s'il fallait explicitement indiquer à toutes les cellules non colspan quelle est leur largeur plutôt que de se déplacer vers la gauche comme tout autre navigateur de la planète.

Score final: Luke: +1 IE: Suck it.

4
ogradyjd

Utilisez la fonction setAttribute. Attribut Name = "colSpan". Cela fonctionne sur IE 8 et Firefox également.
Exemple :

cell.setAttribute("colSpan", 9);
1
Sanath Nair

Puisque vous connaissez la taille de la table (700), vous pouvez contourner le bogue en définissant la largeur des deux cellules dans la deuxième ligne. Avec la deuxième cellule définie à 600 pixels, le tableau se comporte.

Mais ça craint toujours.

Modifier - voici une autre solution de contournement - ajoutez une image vide à la première cellule pour forcer la taille, puis ajoutez une largeur de 100% à la cellule xsecond:

<tr> 
  <td style="width: 100px; border: solid 1px purple;" >x<img src="\images\blank.gif" width="100" height="1" /></td> 
  <td style="border: solid 1px blue;width:100%;">Some sample text</td> 
</tr>
0
Ray

Si vous définissez la largeur du premier td (celui avec colspan = "2") sur 100px, vous obtenez le comportement souhaité, du moins pour ce cas de test.

Autant que je sache, le comportement de IE8 est correct selon les spécifications CSS 2.1: http://www.w3.org/TR/CSS2/tables.html#width-layout section 17.5.2.2 Mise en forme automatique du tableau . L'étape 3 semble suspecte.

Cependant, il s’agit probablement d’un bogue de spécification, car cela semble très vague sur de nombreux détails. L'algorithme en CSS 3 semble beaucoup plus soigneusement spécifié.

EDIT: Cela fonctionne également avec votre deuxième cas de test.

0
Alohci