Таблица из блоков Div на мобильном отображается 1 столбиком

[Guesto]

Таблица из блоков Div на мобильном отображается 1 столбиком,

 

должно выглядеть так

 

 

помогите решить эту проблемму

Edited August 16, 2015 by Guesto

[afdw]

Зачем делать таблицу блоками?

[Guesto]

https://developers.google.com/speed/pagespeed/insights/

Edited August 16, 2015 by Guesto

[afdw]

Ииии... что? При чём здесь эта ссылка-то?

[IvanRu08]

@Guesto, Таблицы - только для табличных данных. Сейчас как раз такой случай. Проще и быстрее 

[Guesto]

Ииии... что? При чём здесь эта ссылка-то?

Ускорьте загрузку своих страниц на всех устройствах.

@Guesto, Таблицы - только для табличных данных. Сейчас как раз такой случай. Проще и быстрее 

Да, я это прекрасно знаю.

 

помогите  пожалуйста решить это без лишних ответов...

[IvanRu08]

помогите  пожалуйста решить это без лишних ответов...

Вы хотите ТАБЛИЦУ сделать с помощью дивов, я правильно понял?

Edited August 16, 2015 by IvanRu08

[Guesto]

 

помогите  пожалуйста решить это без лишних ответов...

Вы хотите ТАБЛИЦУ сделать с помощью дивов, я правильно понял?

 

Все верно, я сделал таблицу из дивов но, на мобильном отображается одним столбиком а на сайте все ок.

Извините, что выкладываю сюда код

 

<style type="text/css">

    .table {

    width: 100%;

    margin: 0 auto;

    border: 1px solid #2B2937;

    border-collapse: collapse;

    height: 150px;

    display: table;

    }

    .tr {

    display: table-row;

    }

    .td {

    display: table-cell;

    border: 1px solid #000;

    }

</style>

<div class="table">

<div class="tr">

<div class="td" >Описание номеров</div>

<div class="td" >Количество номеров</div>

<div class="td" >Before 04.07</div>

<div class="td" >05.07-25.08</div>

</div>

<div class="tr">

<div class="td" >Полу Люкс </br>Астана (3 мест)</div>

<div class="td" >27</div>

<div class="td" > $45 </br>цена за место</div>

<div class="td" > $60 </br>цена за место</div>

</div>

</div>

Edited August 18, 2015 by Guesto

[IvanRu08]

Все верно, я сделал таблицу из дивов но, на мобильном отображается одним столбиком а на сайте все ок.

Можете привести хоть одну причину, по которой вы отказались от таблиц. При для блоков прописали display: table. 

[Vlad]

Используйте таблицу, это самое простое и разумное решение.

[Guesto]

Всем спасибо за ответы, попробую сам решить эту задачку...

[Vlad]

Так понял, вы не хотите следовать нашим советам?

[Guesto]

я бы рад следовать вашим советам но, мне дали такое задание и ее нужно решить!

Погуглим, почитаем может получиться как-то сделать таблицу

Edited August 17, 2015 by Guesto

[Vlad]

Вот ваш код. В каких браузерах, на каких устройствах и при каком разрешении он отображается некорректно?

http://jsfiddle.net/f8m9att7/

[Guesto]

Попробуйте этот же код посмотреть здесь:

http://webmark.com.ua/mobile/

 

к сожалению ссылку на сайт дать не могу.

или здесь: http://www.mobilephoneemulator.com/

[amelice]

Внимательно читайте, что вам пишут )

От вас не требуют ваш сайт, вам за вас перенесли ваш код в jsfiddle. И вопросы задали конкретные - чтоб понять где ловить проблему. А вы про сервисы, может придумали себе проблему? )

Edited August 17, 2015 by amelice

[Nick16]

Так а разве эт реально? Я в том смысле, что даже если и сделать блоки display:inline; то они просто за недостатком ширины экрана будут на след строку переноситься. Разве что попытаться специально для маленьких устройств сделать эту таблицу микроскопической.

 

upd. Извиняюсь, упустил момент с display:table;

Edited August 17, 2015 by Nick16

[Vlad]

Попробуйте этот же код посмотреть здесь:

http://webmark.com.ua/mobile/

 

к сожалению ссылку на сайт дать не могу.

или здесь: http://www.mobilephoneemulator.com/

 

Ну и?

http://webmark.com.ua/mobile/?url=https%3A%2F%2Fjsfiddle.net%2Ff8m9att7%2Fembedded%2Fresult

[Guesto]

Внимательно читайте, что вам пишут )

От вас не требуют ваш сайт, вам за вас перенесли ваш код в jsfiddle. И вопросы задали конкретные - чтоб понять где ловить проблему. А вы про сервисы, может придумали себе проблему? )

Почитайте пожалуйста внимательно мое первое сообщение, на фотографиях все видно. Если бы знал в каком коде таится проблема решил бы сам.

 

Попробуйте этот же код посмотреть здесь:

http://webmark.com.ua/mobile/

 

к сожалению ссылку на сайт дать не могу.

или здесь: http://www.mobilephoneemulator.com/

 

Ну и?

http://webmark.com.ua/mobile/?url=https%3A%2F%2Fjsfiddle.net%2Ff8m9att7%2Fembedded%2Fresult

 

Здесь без вопросов все работает корректно но, у меня на сайте все коряво как на фотографиях.

[amelice]

Почитайте пожалуйста внимательно мое первое сообщение, на фотографиях все видно. Если бы знал в каком коде таится проблема решил бы сам.

 

Мне даже не смешно... 

[amelice]

Я ясно поняла в чем у вас проблема, в предыдущем сообщении пыталась вас призвать обратить внимания на конкретные вопросы, вместо того чтобы приводить сервисы, которые никак не гарантируют точности, чем если бы вы использовали реальный девайс.

Если вы тестите сайт на подобных сервисах, то вообще не понятно в чем у вас проблема.

[Vlad]

Если у вас криво отображается таблица, то проблема не в ней, а в самом сайте. Выложите куда-нибудь код целиком и дайте ссылку на него.