فرمت دادن به مقدار متغیر در CSS

[ROSTAM2]

سلام

در مقاله ای که آدرسش در ضم این خط هست برای ایجاد شماره گذاری خود کار ردیف های جدول از متغیر در CSS استفاده شده:

CSS automatic table row numbering - InfoHeap

حالا با این توصیف من می خوام قالب متنی خودم رو براش تنظیم کنم مثلا 3 رقمی باشه و اگر عدد کوچکتر از 3 زقم باشه الباقی ارقام 0 نوشته بشه مثلا اگر 1 بود بشه 001

SharedScreenshot.jpg

[mazoolagh]

سلام و روز خوش

اگر این المانهایی که نامبرینگ روشون پیاده میکنین از جنس list هستن که خیلی راحته،
ولی اگر مثل این مثال روی tr پیاده شدن کمی فرق میکنه.

این رو مشخص کنین.

[ROSTAM2]

سلام و روز خوش

اگر این المانهایی که نامبرینگ روشون پیاده میکنین از جنس list هستن که خیلی راحته،
ولی اگر مثل این مثال روی tr پیاده شدن کمی فرق میکنه.

این رو مشخص کنین.

سلام....

برای همین نمونه کدی که لینکشو ارسال کردم می خوام ....

[mazoolagh]

سلام دوباره،
خب این با table هست.

برای نشون دادن مطلب یک table خالی گذاشتم:

    <table id="tablex" border=1>

        <thead>

            <tr>

                <th>Counter Created by CSS</th>

                <th>Data</th>

            </tr>

        </thead>

        <tbody>

        </tbody>

    </table>

و با جاوااسکریپت 999 row براش درست کردم:

        window.onload = function () {

            const table_body = document.querySelector('#tablex tbody');

            for (var i = 1; i < 1000; i++) {

                var tr = table_body.insertRow(-1);

                tr.insertCell(0);

                var td2 = tr.insertCell(1);

                td2.innerHTML = `Row ${i}`;

            }

        }

و این هم style :

        @counter-style pad-with-3-zeros {

            system: numeric;

            symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";

            pad: 3 "0";

}





        #tablex {

            counter-reset: row-num;

        }





        #tablex td {

            text-align: center;

        }





        #tablex tbody tr td:first-child::before {

            counter-increment: row-num;

            content: counter(row-num, pad-with-3-zeros) " ";

            color: red;

        }

[mazoolagh]

CSS Counter with padding Zeros for Table Rows


خروجی:

1.png

2.png

[mazoolagh]

و البته که در ie11 کار نمیکنه!

CSS Counter Styles | Can I use... Support tables for HTML5, CSS3, etc

[mazoolagh]

رفرنس:

@counter-style - CSS: Cascading Style Sheets | MDN (mozilla.org)