Предотвратить текст из таблицы таблицы ширины перекрытия

Question

Как можно ограничить запись таблицы <td> расширением на весь экран, если запись слишком длинная?

Answer 1

Ну, в CSS есть max-width, max-height и overflow.

So

td.whatever
{
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
}

ограничит максимальную ширину и высоту до 150px, и может быть от 150 до 150, и все, что не помещается внутри, будет обрезано и скрыто от глаз.

Переполнение по умолчанию (overflow: visible;) - просто позволить всему, что не помещается внутри указанного контейнера, просто перетекать за его пределы. Если вы хотите ограничить его только по горизонтали и не хотите ничего скрывать, word-wrap может помочь:

td.whatever
{
    max-width: 150px;
    word-wrap: break-word;
}

word-wrap будет прерывать слова всякий раз, когда это необходимо, даже если это не в конце слова. Вы также можете просто использовать height и width, чтобы указать фиксированный размер, если вы вообще не хотите, чтобы таблица расширялась или сжималась.

Answer 2

Вы можете использовать word-wrap:break-word;, так что слишком длинные слова будут перенесены.

Answer 3

td.whatever_class{
    max-width: 100px;
}

замените 100px на желаемую ширину.1000px - это хорошая ширина для веб-сайтов, так как она подходит почти для всех мониторов, которые есть у людей сегодня, поэтому, если у вас было 20 столбцов, сделайте, например, 50px.

Answer 4

Вам необходимо указать ОБА стили max-width и display (потому что атрибут display установлен смешно, потому что это td, а не обычный элемент), например,

td{
    max-width: 100px;
    display: inline-block;
}

Answer 5

Существует также хорошее решение со свойством max-width: 0px;поэтому он будет отвечать за полную ширину таблицы.