Съобщение

Collapse
No announcement yet.

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

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

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

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

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

  • iasen2
    replied
    Ако таблицата е голяма няма как да мине без скрол . Аз работя на 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

    Leave a comment:


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

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

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

    Leave a comment:


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

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

    Leave a comment:


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

    img {
    width: 100%;
    height: auto;

    }

    Leave a comment:


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

    Leave a comment:


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

    Leave a comment:

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