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

В приведенном ниже фрагменте HTML, как я могу сделать ширину столбца, который содержит «LAST»? занимают оставшуюся часть строки и ширину столбцов, которые содержат «COLUMN ONE»; и «КОЛОННА ВТОРАЯ»; быть достаточно широким, чтобы вместить их содержание, а не больше.

Спасибо

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%;
}
 flyingL12308 июн. 2016 г., 04:10
Что, если в последней ячейке таблицы есть раскрывающееся меню, то я бы хотел, чтобы его ширина совпадала с шириной ячейки таблицы. Установка ширины раскрывающегося меню на 100% не работает, поскольку ширина содержащего элемента установлена на 99%. Есть ли простой способ сделать это? В настоящее время я использую javascript для динамической установки ширины при открытии раскрывающегося списка.
 jeroen08 апр. 2013 г., 22:18
@ ckaufman Таблицы не устарели, многие атрибуты width, nowrap, так далее.)
 ckaufman08 апр. 2013 г., 20:23
Не рекомендуется использовать тег <td>, но если вы работаете с адаптивными таблицами / таблицами CSS, используя div и display: table-cell, это прекрасно работает.
 Ulysses Alves29 янв. 2016 г., 19:22
Это работает, но мне пришлось добавитьmin-width атрибут второго столбца моей таблицы, чтобы избежать его сокращения.

Ваш ответ на вопрос