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

[Cau]

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

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

 

[scoobydoo]

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

 

[Cau]

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

 

[pamir]

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

img {
width: 100%;
height: auto;
}

 

[cloxy]

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

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

 

[webborisov]

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

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

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

 

[iasen2]

Ако таблицата е голяма няма как да мине без скрол . Аз работя на bootstrap
ето примерен код :

<div class="table-responsive">
<table class="table table-bordered">
    <tbody>
        <tr>
            <td colspan="2">Размер</td>
            <td align="center">Гръдна обиколка(см)</td>
            <td align="center">Обиколка на <br>
            талия *(см)</td>
            <td style="text-align: center">Обиколка на <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