Come rendere l'ultima cella di una riga in una tabella occupare tutta la larghezza rimanente

Question

Nel seguente frammento HTML, come posso rendere la larghezza di una colonna che contiene "ULTIMO" occupare il resto della riga e le larghezze di colonne che contenere 'COLUMN ONE' e 'COLUMN TWO' essere solo abbastanza largo da contenere il loro contenuto e non più grande.

Grazie

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

Avrete bisogno di dire le prime due colonne non per avvolgere e dare l'ultima colonna una larghezza di 99%:

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

Modifica: Si dovrebbe mettere tutti gli stili/presentazione in (esterno ...) css.

Utilizzo delle classi per le colonne (si potrebbe usare selettori CSS3 come nth-child() invece se si target solo i browser moderni):

html:

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

css:

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