Tablodaki bir satırın son hücresi, kalan tüm genişlikte nasıl oluşturulur

Question

Aşağıdaki HTML parçasında, 'LAST' içeren bir sütunun genişliğini, satırın kalanını ve sütunların genişliklerini işgal eden sütunların genişliğini nasıl yapabilirim? 'COLUMN ONE' ve 'COLUMN TWO' içeriklerini içerecek kadar geniş ve daha büyük olmamalıdır.

teşekkür ederiz

table { 
 
    border-collapse: collapse; 
 
} 
 
table td { 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <table width="100%"> 
 
     <tr> 
 
      <td> 
 
      <span> 
 
      COLUMN 
 
      </span> 
 
      <span> 
 
      ONE 
 
      </span> 
 
      </td> 
 
      <td> 
 
      COLUMN TWO 
 
      </td> 
 
      <td> 
 
      LAST 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     ANOTHER ROW 
 
    </td> 
 
    </tr> 
 

 
</table>

Answer 1

Sen sarın ve son sütun% 99 bir genişlik vermek değil ilk iki sütunu söylemek gerekir:

<table width="100%"> 
     <tr> 
     <td style="white-space: nowrap;"> 
      <span> 
      COLUMN 
      </span> 
      <span> 
      ONE 
      </span> 
     </td> 
     <td style="white-space: nowrap;"> 
      COLUMN TWO 
     </td> 
     <td width="99%"> 
      LAST 
     </td> 
     </tr> 
    </table> 

Düzenleme: Tüm stilleri/sunumları (harici ...) css'ye koymalısınız. sütunlar için sınıfları kullanarak

(yalnızca modern tarayıcıları hedeflemek yerine eğer nth-child() gibi css3 seçiciler kullanabilirsiniz):

html:

<tr> 
    <td class="col1"> 
    // etc 

css:

.col1, .col2 { 
    white-space: nowrap; 
} 
.col3 { 
    width: 99%; 
}