نه به Horizontal Scroll!

روی یه پروژه ای کار میکردم که توش یه جدول داشتیم با کلی ستون!

• کد حساب و شرحش

• کد سرفصل حساب و شرحش

• کدهای معین و تفصیلی هر کدوم با شرحشون

• مبالغ تراز آزمایشی، اسناد کاربرگی، طبقه بندی و … هر کدوم بدهکار و بستانکار

خلاصه دنبال یه راهی بودم که هم اسکرول افقی نخوره، هم شکل ظاهریش رو حفظ کنه و خواناییش رو از دست نده.

💡 اولین کاری که کردم این بود که همه کد و شرح ها رو بردم زیر هم توی یک ستون. یعنی به جای اینکه یه ستون بذارم برای کد حساب و یه ستون دیگه بذارم برای شرحش، یه ستون گذاشتم به اسم حساب و کد رو بالا نوشتم و شرحش رو پایین. درسته که ۲ خطی میشد هر ردیفم ولی خواناییش حفظ میشد و قشنگ هم بود. چون تو حالت قبلی هم wrap میشدن و بیشتر ردیف ها چند خطی بودن. همینطور «بدهکار» و «بستانکار» رو هم بردم زیر هم توی یه ستون. اونم عمدتاً یکیش مقدار داره و اون یکی صفره. اینجوری از فضای خالی بیشتر استفاده کردیم.

💡 اما باز هم اسکرول میخورد (مخصوصاً توی مانیتورهای کاربراش که بیشتر کوچیک بودن). اومدم یه سیستم zoom جاوا اسکریپتی درست کردم که موقع نمایش تصمیم میگیره که با توجه به اندازه صفحه، فونت رو تا اندازه ای کوچیک کنه که دیگه اسکرول نخوره! قطعاً توی صفحه های خیلی کوچیک مثل موبایل جواب نمیده ولی کاربرای این سیستم توی شرکت یه مانیتور معمولی دارن و با یکم کوچیک کردن اندازه فونت مشکل حل شد:

var zoomToFitWidth = function (containerSelector) {
    if (!containerSelector) containerSelector = window.activeTabId || 'body';
    const $container = document.querySelector(containerSelector);

    const containerClientWidth = $container.clientWidth;

    let lastClientWidth = $container.getAttribute('last-client-width');
    if (!lastClientWidth) {
        $container.setAttribute('last-client-width', containerClientWidth);
        lastClientWidth = containerClientWidth;
    }
    $container.setAttribute('last-client-width', containerClientWidth);

    const $tables = $container.querySelectorAll('.fit-width-table');

    //اگه کوچیک بوده و بزرگش کرده دوباره توی اندازه فونتش تجدید نظر کنه
    if (containerClientWidth > lastClientWidth) {
        for (let t = 0; t < $tables.length; t++) {
            const $table = $tables[t];
            $table.style.fontSize = "1em"
            $table.setAttribute('zoom', 100);

            const $ths = $table.querySelectorAll('th');
            for (let i = 0; i < $ths.length; i++) {
                $ths[i].style.minWidth = $ths[i].getAttribute('mWidth') + 'px';
            }
        }

        return setTimeout(() => { zoomToFitWidth(containerSelector); }, 100);
    }

    for (let t = 0; t < $tables.length; t++) {
        const $table = $tables[t];
        const zoomRatio = (containerClientWidth / $table.clientWidth) * parseFloat($table.getAttribute('zoom') || 100) / 100;

        if (!(zoomRatio > 0)) {
            setTimeout(() => { zoomToFitWidth(containerSelector); }, 100);
            return;
        }

        if (zoomRatio >= 0.99) return;

        const $ths = $table.querySelectorAll('th');
        for (let i = 0; i < $ths.length; i++) {
            let _width = parseInt($ths[i].getAttribute('mWidth') || '');
            if (!_width) {
                _width = parseInt(getComputedStyle($ths[i]).minWidth);
                $ths[i].setAttribute('mWidth', _width);
            }
            $ths[i].style.minWidth = (_width * zoomRatio) + 'px';
        }

        $table.style.fontSize = zoomRatio + 'em';
        $table.setAttribute('zoom', zoomRatio * 100);

        if ($table.clientWidth > containerClientWidth) {
            setTimeout(() => { zoomToFitWidth(containerSelector); }, 100);
            return;
        }
    }
}

document.addEventListener('DOMContentLoaded', function () {
    zoomToFitWidth('.my-container');
});

window.addEventListener('resize', function (event) {
    zoomToFitWidth('.my-container');
});

Try it Yourself

دیدیگه فقط کافیه به جدولمون کلاس “fit-width-table” رو اضافه کنیم و بگیم تابع zoomToFitWidth رو بعد از پر شدن جدول صدا بزنه. همین. خیلی هم خوشگل 😉

راستی من خودم برای اینکه نسبت اندازه ی ستون ها حفظ بشه، به <th>ها min-width میدم 🤞