Перейти к содержимому

MOAB

* * * * * 1 Голосов

Адаптивная версия сайта. как изменить ширину таблицы?


  • Войдите, чтобы ответить
Сообщений в теме: 8

#1 donc

donc

    Гай Юлий Калигула Сковородкер

  • Основатель
  • PipPipPipPipPip
  • 10 024 сообщений
8 898
  • Изсекты свидетелей Кецалькоатля

Отправлено 13 Март 2021 - 23:26

Делаю сайт руками, вспомнил молодость.
То, как он отображается на мобилах меня лично устраивает, а на мнение гугло-яндекса я клал с прибором.
Но есть одно но.
Весь контент сайт для удобства рукожопого верстальщика, т. е меня, обернут в таблицу шириной 70% так я так хочу по дизайну
То есть так:
<table border="0"  cellpadding="9" bgcolor="#FFFFFF" width="70%">
	<tr>
----весь контент----
</table>
На экране декстопа выглядит хорошо, а вот на мобильном - не очень.
Единственное? что хочу - менять на мобильном устройстве атрибут width на 100%
От балды прописал в стилях

@media screen and (max-width:100%) {
#primary table {
display:block;
}

конечно не работает. А что бы туда написать, чтоб работало?
Наверное стоит задать именно таблице некий атрибут, в общем я хз. Нужно сильное колдунство :)

Поможите люди добрые, мы сами не местныя, дедушка на вокзале лежит рахитом и плоскостопием. Извините, что мы к вам за поможением обращаемся.

#2 KaSH

KaSH

    Инструктор по счастью

  • Основатель
  • PipPipPipPip
  • 1 355 сообщений
2 446
  • Изморя и с гор

Отправлено 14 Март 2021 - 01:20

Таблицей??? Да, ты немного выпал из темы :)
Теперь есть флексы и гриды и куча всего еще.

Правильно так:
@media (max-width: 768px) {
.class{
width: 100%;
}
}

Хотя как точно правильно внутри css уже и сам путаюсь. Ведь сейчас только less и sass. А с телефона и посмотреть неудобно. )))
Серьезные сайты размещаю на VPS, простые в SprintHost и в TimeWeb. Старые, более ненужные мне сайты я продаю на Телдери. Бухгалтерию и отчеты в налоговую за меня делает Эльба.

#3 donc

donc

    Гай Юлий Калигула Сковородкер

  • Основатель
  • PipPipPipPipPip
  • 10 024 сообщений
8 898
  • Изсекты свидетелей Кецалькоатля

TC Отправлено 14 Март 2021 - 07:18

Просмотр сообщенияKaSH сказал:

Таблицей??? Да, ты немного выпал из темы
Да там все прекрасно: PHP include в HTML и вообще извращаюсь. Еще как выпал - лет 15 сайты не делал.

Черт не работает. Таблицы зло, я знаю. :(

#4 KaSH

KaSH

    Инструктор по счастью

  • Основатель
  • PipPipPipPip
  • 1 355 сообщений
2 446
  • Изморя и с гор

Отправлено 14 Март 2021 - 10:53

Просмотр сообщенияdonc (14 Март 2021 - 07:18) писал:

Да там все прекрасно: PHP include в HTML и вообще извращаюсь. Еще как выпал - лет 15 сайты не делал.

Черт не работает. Таблицы зло, я знаю. :(
Ну в includ'ах нет ничего страшного :)
Все должно быть оправдано. И, ИМХО, делать сложно там, где делать можно просто, это извращение.

Не работает, скорее всего, так как у тебя width=70% жестко указано в html. Выноси это все в стили.

.tableclass{
width: 100%;
}
@media (min-width: 768px) {
.tableclass{
width: 70%;
}

И в html страницы.
<table class="tableclass">
<tr>
----весь контент----
</table>

А еще лучше замени table на div или на section
Серьезные сайты размещаю на VPS, простые в SprintHost и в TimeWeb. Старые, более ненужные мне сайты я продаю на Телдери. Бухгалтерию и отчеты в налоговую за меня делает Эльба.

#5 donc

donc

    Гай Юлий Калигула Сковородкер

  • Основатель
  • PipPipPipPipPip
  • 10 024 сообщений
8 898
  • Изсекты свидетелей Кецалькоатля

TC Отправлено 14 Март 2021 - 13:34

Спасибо счас поковыряю:))

Просмотр сообщенияKaSH сказал:

А еще лучше замени table на div или на section
Поздно уже пить боржоми :) Все переделывать и возиться со всем этим сил нет)

Но чета тоже никак.. На десктопе это отрабатывается

tableclass{
width: 70%;

на смарте тоже отсюда берет значения. И равно показывает 70%

#6 Drakon

Drakon

    Балбес

  • Основатель
  • PipPipPipPipPip
  • 2 008 сообщений
1 555
  • Изmsk

Отправлено 14 Март 2021 - 21:51

такое сунуть не забыл ?

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0,user-scalable=1" />

и может так:

@media (max-width: 843px)



ПС: как раз тоже подправлял свое старье ( тоже еще на таблицах, и вроде норм получилось )
недорогие и надежные vds - инструмент поднятия ТИЦ
монетизация с ссылок: тут и тут
...
успевает тот, кто не спешит (с)

#7 donc

donc

    Гай Юлий Калигула Сковородкер

  • Основатель
  • PipPipPipPipPip
  • 10 024 сообщений
8 898
  • Изсекты свидетелей Кецалькоатля

TC Отправлено 14 Март 2021 - 22:59

Просмотр сообщенияDrakon сказал:

такое сунуть не забыл ?
Забыл. Я вообще в адаптиве не бум бум
Щас попробую

<meta name="viewport" с этим вообще жопа, все огромное и не масштабируется :(

#8 c4e8ece0

c4e8ece0

    Ниггер на лошади

  • Участник
  • PipPipPipPipPip
  • 5 274 сообщений
6 792
  • Изцирка

Отправлено 15 Март 2021 - 15:07

<meta name="viewport" content="width=device-width, initial-scale=1">
@media (max-width:1000px) {
table {width:100%;}
}

"Они не могут ничего, у них лапки котят"

#9 protector

protector

    Почетный

  • Основатель
  • PipPipPipPipPip
  • 3 633 сообщений
2 237
  • ИзСанкт-Петербурга

Отправлено 15 Март 2021 - 16:31

из html убирай
width="70%"
и делай, как сказал c4e8ece0

А вообще, я для адаптации таблиц у td делаю display:inline-block - получается строчками. Для ряда случаев - хорошо вылядит.



Похожие темы


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных



© 2021 SMO&SEO форум «WEBIMHO» — продвижение и создание сайтов, интернет-маркетинг

По вопросам рекламы на форуме и цены на рекламу
Все материалы SEO форума разрешены к копированию только с установкой гиперактивной ссылки на webimho.ru,
тем, кто этого не сделает, мы оторвем руки и ноги и поменяем местами,
а когда выйдем из тюрьмы, опять оторвем и опять поменяем.


Россия, г. Москва
  • Top.Mail.Ru

Мы в соцсетях: twitter | вконтакте | facebook | livejournal