Warum ist meine Tabellenzellenbreite in Chrome falsch?

Question

Ich habe einen Tisch mit zwei Reihen. Die erste Reihe hat nur drei Zellen. Die zweite Zeile enthält zwei Zellen, wobei die erste Zelle eine andere Tabelle enthält, die die gesamte Zelle füllen muss.

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

Einfach genug, wirklich .... oder so dachte ich.

Es scheint, als würde ich in IE erwarten. Aber Chrome scheint die Breite der ersten Zelle nicht korrekt anzuwenden. Es scheint von der Tabelle in der Zelle darunter betroffen zu sein.

Warum ist das passiert, und wie kann ich dieses Problem umgehen?

Answer 1

Zwei Dinge sollten Sie tun:

• Auf dem Tisch Element,
• Spalten einfügen verwenden und eine Breite
  • (Sie geben könnten auch Tabellenüberschriften/Zellen der zuweisen Breite erste Reihe)

So:

<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. -->