0

Стандартная таблица. Стили в шаблоне 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;
}

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

4
  • А какой конкретно результат вы желаете видеть при столь маленькой ширине?
    – andreymal
    28 ноя 2022 в 17:32
  • Тут особенно и не поправишь. Как вариант уменьшать размер шрифта. Но тогда он станет нечитаемым. Как вариант можно сделать чтобы таблица не сжималась по ширине экрана. Но тогда будет горизонтальная прокрутка на узких экранах.
    – newman
    28 ноя 2022 в 17:35
  • @andreymal наверное, переносить текст вертикально, или как принято 28 ноя 2022 в 17:38
  • 1
    Если вы хотите перенос текста по слогам, то hyphens
    – andreymal
    28 ноя 2022 в 17:39

1 ответ 1

0

Не знаю, как в 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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.