CSS: table {largeur: 100%; display: block;} ne fonctionne pas dans Firefox

J'ai un tableau html à l'intérieur d'un div d'une taille spécifique. Je veux la table pour appliquer la marge de l'effondrement et de 100% de largeur. Voici mon code. Il rend la façon dont je le veux dans IE8 et correctement dans Firefox. Firefox peut faire la spec correctement, mais peu importe. Comment puis-je résoudre mon css pour travailler dans les deux navigateurs?

<!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">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<style type="text/css">
table
{
    border-collapse: collapse;
    border-spacing: 0;
}

table
{
    margin: 10px 0;
    width: 100%;
    display: block;
}

p
{
    margin: 10px 0;
}

td, th
{
    border: 1px solid #000000;
}

</style>
</head>

<body>

<div style="width: 600px; border: 1px purple solid;">

<p>Some text at the top.  Notice that the margin collapse does not work unless display:block.</p>

<table>
    <tr>
        <th></th>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Label 1</td>
        <td>1.A</td>
        <td>1.B</td>
        <td>1.c</td>
    </tr>
    <tr>
        <td>Label 2</td>
        <td>2.A</td>
        <td>2.B</td>
        <td>2.c</td>
    </tr>
</table>

<p>Some text at the bottom.  Notice that the margin collapse does not work unless display:block.  Its stupid.</p>


</div>

</body>

</html>

J'ai besoin de l'display:block pour la marge de l'effondrement de travailler dans Firefox. Si vous supprimez le display:block, vous devriez remarquer que l'espacement entre les <p> balises s'élargit de 10px de 20px.

C'est aussi une édition de cette question que j'ai posté plus tôt, mais il ne me permet pas de modifier pour une raison quelconque. J'ai été déconner avec mon cache internet donc j'ai probablement loupé un cookie.

source d'informationauteur Maggie | 2010-09-28

  1. 16

    Vous devez ajouter table-layout: fixed pour le style affecté à la table, c'est tout.

  2. 13

    Utilisation display: table et votre problème sera résolu.

  3. 6

    il suffit de retirer le display: block;le border-collapse fonctionne très bien

  4. 6

    supprimer

    display: block;

    modifier cette 

    table
{
    margin: 10px 0;
    width: 100%;
    display: block;
}

    à

    table
{
    margin: 10px 0;
    width: 100%;
}

    pour la démo en live

    Marge de l'effondrement n'est défini que pour les éléments de bloc.

    Tables sont spéciales. Dans le CSS specs, ils ne sont pas tout à fait les éléments de bloc - règles spéciales s'appliquent à la taille et la position, à la fois de leurs enfants (évidemment), et de l'élément de la table elle-même.

    vérifier les liens

    Solution à la marge de l'effondrement est

    Vous pouvez utiliser une de 1 pixel de haut rembourrage ou des frontières afin d'éviter les marges s'effondrent.

  5. 3

    Bon, c'est mon premier post sur un Débordement de Pile, et je crois avoir résolu votre problème. Je me suis contenté de modifier la ligne "display: block;" "position: relative;" et qui semblait avoir résolu le "stretching".

    J'utilise Chrome et j'ai compris ce que tu veux dire lorsque les tables n'étaient pas étirant comme ils l'étaient dans Internet Explorer. Je sais que Chrome et Firefox poignée de pages assez similaire, de sorte que pourrait avoir résolu votre problème.

  6. 1

    Je me demande.. Si vous êtes en précisant div width="600" et ensuite exiger la table pour s'adapter à 100%.. Pourquoi ne pas mettre une largeur sur la table au lieu de la div contenant.

    ne me dérange pas de moi, Juste curieux de savoir ce que vous essayez d'atteindre d'autres que le border-collapse.

  7. 1

    Vous pouvez fixer la largeur de la difficulté en ajoutant simplement un court JScritp ... d'abord l'ajouter à votre balise BODY: onload="autoadjustw"; et ce petit script dans la balise head:

    function autoadjustw(){
   AN=document.getElementById("parent_object").offsetWidth;
   document.getElementById("Table_Id").style.width=AN+"px";
}
  8. 0

    si la suppression display: block pauses dans IE utiliser '\9' à la cible c'est à dire uniquement comme:

    table 
{ 
    margin: 10px 0; 
    width: 100%; 
    display: block; /*for ie only"*/

}
  9. -1

    Vous devez définir les éléments de parent à 100%, trop, de sorte que le tableau sait ce que c'est un pourcentage de.

  10. -1

    Tables de ne pas utiliser display: block; Simple width: 100%; devrait faire l'display: block; truc.

    N'ont jamais, jamais!