Question

На сайте в ячейках таблицы длинные заголовки. При просмотре на смартфоне таблица вылезает за пределы страницы.
Как с помощью условных операторов изменить текст в ячейках (например, коэфиициент на коэфф.) для просмотра на смартфоне?

Answer 1

Заворачивайте определенные части текста в определенный класс вида:

<span class="medias">здесь текст внутри ячейки</span>

далее в стили прописать:

@media screen and (min-width: 320px) and (max-width: 650px) { 
.medias {
    ваши стили
}}

таких классов можете создать хоть сотню и для каждого свое условие и свои стили. Вместо красного пропишите разрешение от и до и далее пишите свои стили для текста.

Comments

В таблицу пишу это:

<span class="medias">текст</span>

В стили добавляю это:

@media screen and (min-width: 320px) and (max-width: 650px) { 
.medias {td,tr,table {border-collapse:collapse!important;}
table:not([class]) {
border: 1px solid #e5e5e5;
}
table:not([class]) td, table:not([class]) th {
padding: 7px!important;
}
table:not([class]) th {
text-align: center;
}}

ставил разное разрешение, чистил кеш, но всё равно ничего не происходит.

Надо, чтобы при изменении разрешения экрана один текст менялся на другой.

 

Могли бы вы этот вопрос показать Sentimo, он такие задачи решает за секунду?

---

12 1000,

Адрес сайта, где можно увидеть это.

---

Sentimo,

Надо, чтобы слово "мр-сть" заменяло слово "морозостойкость" при маленьком разрешении (это как пример).

---

Как пример.... "Морозостойкость"  завернуть в span с классом .moroz только надпись "мр-сть" надо вынести из спана морозостойкость

<span class="moroz">Морозостойкость</span>

<span class="medias">Мр-сть</span>

и в ксс пишем такое условие

.medias {display:none;}
@media only screen and (max-width: 360px) {
.medias {display:block;}
.moroz {display:none;}
}

Принцеп понятен? Но это не решит до конца проблему, очень сложно табличную верстку вписывать в адаптацию, смотрите в строну "грида" https://css-tricks.com/snippets/css/complete-guide-grid/

---

Sentimo,

Благодарю. Так всё работает.

А как сделать так, чтобы таблица была в окне? Чтобы дёргая за ползунок можно было её перемещать внутри окна. Когда-то видел такое на uKit.

Как в этих окнах:

https://css-tricks.com/snippets/css/complete-guide-grid/

 

---

12 1000,

Почему вопросы "зависают в воздухе"?

---

12 1000,

Небольшой пример с скролом. Делается примерно так, завернуть таблицу в див:

<div class="table-responsive">здесь код таблицы</div>

И прописать в самый низ страницы под таблицей (красное не удалять) или в таблицу стилей (тогда красное удалить) следующий код вида:

<style>@media screen and (min-width: 320px) and (max-width: 767px) { .table-responsive { max-width: 767px; overflow: hidden; overflow-x: scroll; } }</style>

320 и 767 настраивайте под нужные вам разрешения экрана начиная с которого и до которого будет скрол у таблицы.

---

Yuri_Geruk,

Спасибо большое.