Perché la larghezza della cella della tabella è errata in Chrome?

Question

Ho un tavolo con due file. La prima riga ha solo tre celle. La seconda riga ha due celle, con la prima cella contenente un'altra tabella che deve riempire l'intera cella.

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

Abbastanza semplice, davvero .... o almeno così ho pensato.

Sembra che mi aspetto in IE. Ma Chrome sembra non applicare correttamente la larghezza della prima cella. Sembra essere influenzato dalla tabella nella cella sottostante.

Perché succede questo, e come posso ottenere intorno a questo?

Answer 1

due cose che si dovrebbe fare:

• Sul elemento di tabella, utilizzare
• Inserisci colonne e dare loro una larghezza
  • (Si potrebbe anche assegnare la larghezza di intestazioni di tabella/cellule del prima fila)

Ti piace questa:

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