Как задать ширину столбцов таблицы

Короткий ответ

Включите table-layout: fixed и задайте ширину колонок через <col> — браузер будет строго их соблюдать:

<style>
  table { table-layout: fixed; width: 100%; border-collapse: collapse; }
  td { border: 1px solid silver; padding: 6px; }
</style>
 
<table>
  <colgroup><col style="width: 60px;"><col><col style="width: 25%;"></colgroup>
  <tr><td>#1</td><td>A long product description that wraps</td><td>$25</td></tr>
  <tr><td>#2</td><td>Tea</td><td>$3</td></tr>
</table>

Колонка без ширины забирает всё оставшееся место.

Почему нужен fixed

По умолчанию (table-layout: auto) браузер подбирает ширину колонок по содержимому, и заданная ширина для него лишь пожелание: длинное слово растянет столбец. В режиме fixed ширины берутся из <col> или первой строки и не зависят от текста — таблица к тому же отрисовывается быстрее.

Обрезать длинный текст

С фиксированной раскладкой текст, который не помещается, можно обрезать многоточием:

<style>
  table { table-layout: fixed; width: 260px; }
  td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>
 
<table>
  <tr><td>A very long file name that does not fit.pdf</td><td style="width: 60px;">2 MB</td></tr>
</table>

Частая ошибка

Задают table-layout: fixed, но не задают ширину самой таблице. Без width фиксированный режим не включается, и таблица снова подстраивается под содержимое. Добавьте width: 100% или точное значение.