Cómo hacer que la última celda de una fila en una tabla ocupe el ancho restante

Question

En el siguiente fragmento HTML, ¿cómo puedo hacer que el ancho de una columna que contiene 'LAST' ocupe el resto de la fila y el ancho de las columnas contener 'COLUMN ONE' y 'COLUMN TWO' ser lo suficientemente amplio como para contener su contenido, y no más grande.

Gracias

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

Tendrá que contar las dos primeras columnas de no envolver y dar la última columna de una anchura de 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> 

Editar: Debe poner todos los estilos/presentaciones en (externo ...) css.

Utilización de las clases para las columnas (que podría utilizar selectores CSS3 como nth-child() lugar si solo orienta los navegadores modernos):

html:

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

css:

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