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 that you have read and understand our privacy policy and code of conduct.

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