Возьмите следующий CSS + HTML:

<style>
    div.stuff {
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
    }
    table { width: 100%; }
    td { border: 1px dotted black; }
</style>

<table>
    <tr><td>
        <div class='stuff'>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text</div>
    </td></tr>
</table>

Это заставляет таблицу расти, чтобы вместить весь длинный текст. (Уменьшите окно браузера, чтобы увидеть, есть ли у вас огромное разрешение экрана.)

я добавилwidth: 100% а такжеoverflow: hidden чтобы указать, что длинный текст должен быть просто обрезан, но, похоже, это игнорируется. Как я могу ограничить таблицу / ячейку таблицы / div таким образом, чтобы ширина таблицы не превышала ширину документа?

(Пожалуйста, не комментируйте достоинства использования таблицы вообще. Я действительно отображаю табличные данные, поэтому использование таблицы семантически правильно. Также, пожалуйста, не подвергайте сомнению удобство вырезания текста; на самом деле кнопка «развернуть», которая позволяет пользователю просматривать все содержимое. Спасибо!)

(Изменить: я пыталсяmax-width тоже безрезультатно.)