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

tablas en html5

Question

En el siguiente fragmento de HTML, ¿cómo puedo hacer que el ancho de una columna que contiene "ÚLTIMO" ocupe el resto de la fila, y el ancho de las columnas que contienen "COLUMNA UNO" y "COLUMNA DOS" sea lo suficientemente ancho 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

Deberá indicar a las dos primeras columnas que no se ajusten y dar a la última columna un ancho del 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>

Edición: debe poner todos los estilos / presentación en (externo ...) css.

Usar clases para las columnas (en su lugar, podría usar selectores css3 como nth-child() si solo se dirige a los navegadores modernos):

html:

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

css:

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