So stellen Sie sicher, dass die letzte Zelle einer Zeile in einer Tabelle die gesamte verbleibende Breite belegt

Wie kann ich im folgenden HTML-Fragment festlegen, dass die Breite einer Spalte, die 'LAST' enthält, den Rest der Zeile einnimmt und die Breite von Spalten, die 'COLUMN ONE' und 'COLUMN TWO' enthalten, gerade breit genug ist, um ihren Inhalt aufzunehmen? und nicht größer.

Vielen Dank

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>

Sie müssen den ersten beiden Spalten mitteilen, dass sie nicht umbrochen werden sollen, und der letzten Spalte eine Breite von 99% geben:

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

Bearbeiten: Sie sollten alle Stile / Präsentationen in (extern ...) CSS setzen.

Verwenden von Klassen für die Spalten (Sie können nth-child()stattdessen CSS3-Selektoren verwenden, wenn Sie nur auf moderne Browser abzielen):

html:

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

CSS:

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