Таблица html+css, текст наезжает на соседние ячейки

Question

Стандартная таблица. Стили в шаблоне Wordpress, если нужно уточнить. Верстал не сам, не умею) На узких экранах текст наезжает на соседние ячейки:

Стили такие:

table {
    border: 1px solid #ccc;
    width: 99%;
}
table thead tr {
    border-bottom: 1px solid #ccc;
}
table thead tr th {
    padding: 5px;
    border-right: 1px solid #ccc;
}
table thead tr th:last-child {
    border-right: 0;
}
table tbody tr {
    border-bottom: 1px solid #ccc;
}
table tbody tr th, table tbody tr td {
    border-right: 1px solid #ccc;
    padding: 5px;
    font-weight: normal;
}

Подскажите, пожалуйста, что можно поправить?

Answer 1

Не знаю, как в WordPress, но обычно размер ячеек подгоняется под размер содержимого. Можно попробовать добавить свойство word-wrap со значением break-word к стилям, где есть селекторы ячеек th и td.

   table tbody tr th, table tbody tr td {
    border-right: 1px solid #ccc;
    padding: 5px;
    font-weight: normal;
    word-wrap: break-word;
}

Также можно к селектору table добавить свойство table-layout: fixed

БЛОГ НА HUSL

Таблица html+css, текст наезжает на соседние ячейки

Ответы (1 шт):