Съобщение

Collapse
No announcement yet.

Оразмеряване на таблица за мобилни устройства

Collapse
X
  • Филтър
  • Период
  • Показване на
Clear All
нови коментари

  • Оразмеряване на таблица за мобилни устройства

    Здравейте колеги,

    Бих искал да се допитам до Вас за следния проблем, имам сайт който има и мобилна версия, всичко си работи чудесно с изключение на едно нещо. В него , по-точно в всяка негова страница са вкарани Dreamweaver таблици с размери и цени, тези таблици съм ги правил аз и съм добавил някой друг CSS, за по-добър дизайн. Проблема идва от там , че когато се зареди сайта от мобилно устройство, самата му структура преминава към мобилния му вид, но таблиците вътре не. Те остават големи и отрязани, пробвах някакви варианти с @media squarespace скриптове , но нещо не се получава или аз не го правя правилно. Ако може някой да даде идея , как тези въпросни таблици да станат с апаптивен дизайн в зависимост от устройството, което ги отваря и просто с "зумване" да се достига до исканата информация. Предварително благодаря на всеки имал желанието да отговори и помогне, поздрави!
    При нас може да намерите всички видове дунапрен и мемори пяна за изработка на матраци. Предлагаме дунапрени за тапициране,облицоване и всякакви други мебелни дейности.

  • #2
    Ако просто се зададат проценти като ширини също ще бъдат адаптивни, но проблема идва когато са по-широки и няма начин да се съберат на малък екран. Тогава са нужни разни css или js трикове за да се направят четими. Има различни методи. Чети тук: http://exisweb.net/responsive-table-...s-and-patterns
    Или пиши в гугъл: responsive data html tables

    Коментар


    • #3
      Благодаря много, ще прочета и ще се опитам да намеря решение

      Коментар


      • #4
        Статията посочена от scoobydoo е много изчерпателна, да добавя само, че ако в таблицата има изображение, то също трябва да се преоразмери. За целта може да свърши работа един CSS от рода на:

        img {
        width: 100%;
        height: auto;

        }

        Коментар


        • #5
          Аз правя таблиците адаптивни с хоризонтален скрол. Според мен това е най-доброто решение. Изглеждат като iframe, лесно се работи с тях на мобилни устройства.

          Взаимствал съм този похват от Bootstrap.

          Коментар


          • #6
            Първоначално публикувано от cloxy View Post
            Аз правя таблиците адаптивни с хоризонтален скрол. Според мен това е най-доброто решение. Изглеждат като iframe, лесно се работи с тях на мобилни устройства.

            Взаимствал съм този похват от Bootstrap.

            Ако са малките таблиците е четимо, но ако е дълга и обемиста таблицата с текст и така на татък, този скрол излиза най-от долу и просто няма как да е четимо. За големи таблици, не е ли по добре да се ползва този вид http://codepen.io/geoffyuen/pen/FCBEg

            Коментар


            • #7
              Ако таблицата е голяма няма как да мине без скрол . Аз работя на bootstrap
              ето примерен код :
              HTML Code:
              <div class="table-responsive">
              <table class="table table-bordered">
                  <tbody>
                      <tr>
                          <td colspan="2">Размер</td>
                          <td align="center">Гръдна обиколка(см)</td>
                          <td align="center">Обиколка на&nbsp;<br>
                          талия *(см)</td>
                          <td style="text-align: center">Обиколка на&nbsp;<br>
                          талия**(см)</td>
                          <td style="text-align: center">Обиколка на ханш(см)</td>
                      </tr>
                      <tr>
                          <td style="text-align: center" colspan="2">S</td>
                          <td style="text-align: center">74</td>
                          <td style="text-align: center">60</td>
                          <td style="text-align: center">76</td>
                          <td style="text-align: center">88</td>
                      </tr>
                      <tr>
                          <td style="text-align: center" colspan="2">M</td>
                          <td style="text-align: center">86</td>
                          <td style="text-align: center">66</td>
                          <td style="text-align: center">82</td>
                          <td style="text-align: center">94</td>
                      </tr>
                      <tr>
                          <td style="text-align: center" colspan="2">L</td>
                          <td style="text-align: center">92</td>
                          <td style="text-align: center">76</td>
                          <td style="text-align: center">90</td>
                          <td style="text-align: center">104</td>
                      </tr>
                      <tr>
                          <td style="text-align: center" colspan="2">XL</td>
                          <td style="text-align: center">96</td>
                          <td style="text-align: center">82</td>
                          <td style="text-align: center">100</td>
                          <td style="text-align: center">114</td>
                      </tr>
                  </tbody>
              </table>
              </div>
              стила е атоматично добавен, понеже таблицата я качвам от админа на сайта. ако се смени класа на таблицата може и да няма скрол , ама виж за това в документацията на bootstrap

              Коментар

              Изчакайте...
              X