Убедитесь, что ширина ячеек таблицы соблюдается

Question

У меня есть HTML <table> с несколькими столбцами.Как я могу обеспечить соблюдение заданной ширины ячейки / столбца в любом случае?То есть, если я задаю ширину ячейки 100 пикселей и если текстовое содержимое длинное (превышает 100 символов без пробелов), текстовое содержимое должно соответствовать ширине 100 пикселей и переноситься на следующую строку.

Я уже пробовал использовать word-wrap:break-word, но это не работает.

Пожалуйста, помогите мне.

Answer 1

Используйте table-layout: fixed, чтобы обеспечить соблюдение ширины td.

Ознакомьтесь с MDN документами для получения дополнительной информации.

Редактировать

Как-то так должно работать у вас:

table {
    table-layout: fixed;
}
td {
    color:white;
    width:50px;
    background-color:Blue;
    word-wrap: break-word;
    max-width:50px;
}

Вот рабочая скрипка для демонстрации.