SearchEngines.bg

Това е примерно съобщение за гост. Регистрирайте безплатен акаунт днес, за да станете потребител на SearchEngines.bg! След като влезете, ще можете да участвате в този сайт, като добавите свои собствени теми и публикации, както и да се свържете с други членове чрез вашата лична входяща кутия! Благодарим ви!

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

Cau

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

Бих искал да се допитам до Вас за следния проблем, имам сайт който има и мобилна версия, всичко си работи чудесно с изключение на едно нещо. В него , по-точно в всяка негова страница са вкарани Dreamweaver таблици с размери и цени, тези таблици съм ги правил аз и съм добавил някой друг CSS, за по-добър дизайн. Проблема идва от там , че когато се зареди сайта от мобилно устройство, самата му структура преминава към мобилния му вид, но таблиците вътре не. Те остават големи и отрязани, пробвах някакви варианти с @media squarespace скриптове , но нещо не се получава или аз не го правя правилно. Ако може някой да даде идея , как тези въпросни таблици да станат с апаптивен дизайн в зависимост от устройството, което ги отваря и просто с "зумване" да се достига до исканата информация. Предварително благодаря на всеки имал желанието да отговори и помогне, поздрави! ;)
 
Ако просто се зададат проценти като ширини също ще бъдат адаптивни, но проблема идва когато са по-широки и няма начин да се съберат на малък екран. Тогава са нужни разни css или js трикове за да се направят четими. Има различни методи. Чети тук: http://exisweb.net/responsive-table-plugins-and-patterns
Или пиши в гугъл: responsive data html tables
 
Благодаря много, ще прочета и ще се опитам да намеря решение ;)
 
Статията посочена от scoobydoo е много изчерпателна, да добавя само, че ако в таблицата има изображение, то също трябва да се преоразмери. За целта може да свърши работа един CSS от рода на:

img {
width: 100%;
height: auto;

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

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

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


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

Горе