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

[ROSTAM2]

سلام

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

CSS automatic table row numbering - InfoHeap (https://infoheap.com/css-automatic-table-row-numbering/)

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

156061

[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 (https://jsfiddle.net/mazoolagh/aLqob0mp/1/)


خروجی:

156062

156063

[mazoolagh]

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

CSS Counter Styles | Can I use... Support tables for HTML5, CSS3, etc (https://caniuse.com/css-at-counter-style)

[mazoolagh]

رفرنس:

@counter-style - CSS: Cascading Style Sheets | MDN (mozilla.org) (https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style)