Как сделать последнюю ячейку строки в таблице занимать всю оставшуюся ширину

В нижеприведенном фрагменте HTML, как я могу сделать ширину столбца, который содержит "LAST", занимает оставшуюся часть строки, а ширины столбцов, которые содержат "COLUMN ONE" и "COLUMN TWO", достаточно широки, чтобы содержат их содержимое и не больше.

Спасибо

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>

Ответ 1

Вам нужно будет указать первые два столбца, которые не следует обертывать, и дать последнему столбцу ширину 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>

Изменить: Вы должны поместить все стили/презентации в (внешние...) css.

Использование классов для столбцов (вместо селекторов css3, таких как nth-child(), если вы ориентируетесь только на современные браузеры):

HTML:

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

CSS

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

Ответ 2

Есть, вероятно, лучшие решения с использованием CSS, но то, что я сделал, задает ширину последнего столбца примерно на 95-100%

<td> ONE </td>
<td> TWO </td>
<td width=100%> LAST </td>