td mit Breite 100% innerhalb div mit Position absolut

Question

Das Verhalten des Code-Snippets unterscheidet sich in Chrome 51.0.2704.103 und Firefox 47.0.1.

Bitte erläutern Sie, warum dies geschieht. Wo Verhalten ist richtig, wo nicht und warum denkst du so. Vielen Dank.

div, 
 
td { 
 
    border: 1px solid black; 
 
} 
 
.container { 
 
    position: absolute; 
 
} 
 
.w100Pc { 
 
    width: 100%; 
 
} 
 
.nowrap { 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 
    <div>Modal dialog header</div> 
 
    <table> 
 
    <tr> 
 
     <td class="w100Pc">rest of space column</td> 
 
     <td class="nowrap">content based width column</td> 
 
    </tr> 
 
    </table> 
 
    <div>Here goes main content what should stretch "container" width</div> 
 
    <div>Modal dialog footer</div> 
 
</div>

Answer 1

Browser machen den Code anders ich denke, es ist, weil sie unterschiedliche Standards folgen, ich denke, Firefox den Code derzeit Rendering in Ihnen Beispiel und es das gleiche in beiden Browsern aussehen nur hinzufügen display:block;

div, 
 
td { 
 
    border: 1px solid black; 
 
} 
 
.w100Pc { 
 
    display:block; 
 
    width: 100%; 
 
    font-family:'Times New Roman'; 
 
} 
 
.container { 
 
    position: absolute; 
 
    left: 200px 
 
}

<div style="position: absolute; left:200px"> 
 
    <table class="w100Pc"> 
 
    <tr> 
 
     <td class="w100Pc"> 
 
     w100Pc 
 
     </td> 
 
     <td>buttons</td> 
 
    </tr> 
 
    </table> 
 
</div>