Dlaczego moja szerokość komórek tabeli jest błędna w Chrome?

Question

Mam stół z dwoma rzędami. Pierwszy rząd ma po prostu trzy komórki. Drugi rząd ma dwie komórki, z pierwszą komórką zawierającą inną tabelę, która musi wypełnić całą komórkę.

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

Wystarczająco proste, naprawdę .... lub tak pomyślałem.

Wygląda na to, czego oczekuję w IE. Ale wydaje się, że Chrome nie stosuje poprawnie szerokości pierwszej komórki. Wygląda na to, że tabelka w komórce jest poniżej.

Dlaczego tak się dzieje i jak mogę to obejść?

Answer 1

Dwie rzeczy, które należy zrobić:

• na elemencie tabeli, użyj
• kolumny Wstawianie i dać im szerokość
  • (Można również przypisać szerokość do nagłówków tabeli/komórek pierwszy wiersz)

jak poniżej:

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