Helper Icon Image
دسترسی نامحدود

به برنامه ریزی برای دسترسی به گزارش های نامحدود ارتقا دهید

ارتقا دهید

جداول پایه

مثال اساسی

برای یک ظاهر طراحی اولیه - بالشتک های سبک و فقط تقسیم کننده های افقی - کلاس پایه را اضافه کنید.table to any <table>.

نام شماره تلفن تاریخ تولد فعال؟
ریسا دی. پیرسون 336-508-2157 24 جولای 1950
آن سی تامپسون 646-473-2057 25 ژانویه 1959
پل جی. دوست 281-308-0793 1 سپتامبر 1939
لیندا جی اسمیت 606-253-1207 3 مه 1962
                                                    \u003ctable class\u003d\
                                                

جدول معکوس

همچنین می‌توانید رنگ‌ها را با متن روشن روی پس‌زمینه‌های تیره معکوس کنید.table-dark.

نام شماره تلفن تاریخ تولد فعال؟
ریسا دی. پیرسون 336-508-2157 24 جولای 1950
آن سی تامپسون 646-473-2057 25 ژانویه 1959
پل جی. دوست 281-308-0793 1 سپتامبر 1939
شان سی نگوین 269-714-6825 5 فوریه 1994
                                                    \u003ctable class\u003d\
                                                

ردیف های راه راه

استفاده کنید.table-striped to add zebra-striping to any table row within the <tbody>.

کاربر شماره حساب. تعادل عمل
table-user Risa D. Pearson AC336 508 2157 24 جولای 1950
table-user Ann C. Thompson SB646 473 2057 25 ژانویه 1959
table-user Paul J. Friend DL281 308 0793 1 سپتامبر 1939
table-user Sean C. Nguyen CA269 714 6825 5 فوریه 1994
                                                    \u003ctable class\u003d\
                                                

گزینه های سر جدول

از یکی از دو کلاس اصلاح کننده برای ساخت استفاده کنید<thead>s appear light or dark gray.

تولید - محصول پیک روند وضعیت
کمر بلند ASOS Ridley فدرال اکسپرس
تحویل داده شده
پیراهن سبک وزن مارکو DHL
ارسال شد
پیراهن نیم آستین روشن
سفارش دریافت شد
ژاکت سبک فدرال اکسپرس
تحویل داده شده
                                                    \u003ctable class\u003d\
                                                

ردیف های قابل شناور

اضافه کردن.table-hover to enable a hover state on table rows within a <tbody>.

تولید - محصول قیمت تعداد میزان
کمر بلند ASOS Ridley 79.49 دلار 82 عدد 6518.18 دلار
پیراهن سبک وزن مارکو 128.50 دلار 37 عدد 4754.50 دلار
پیراهن نیم آستین 39.99 دلار 64 عدد 2559.36 دلار
ژاکت سبک 20.00 دلار 184 عدد 3,680.00 دلار
                                                    \u003ctable class\u003d\
                                                

میز کوچک

اضافه کردن.table-sm to make tables more compact by cutting cell padding in half.

تولید - محصول قیمت تعداد میزان
کمر بلند ASOS Ridley 79.49 دلار 82 عدد 6518.18 دلار
پیراهن سبک وزن مارکو 128.50 دلار 37 عدد 4754.50 دلار
پیراهن نیم آستین 39.99 دلار 64 عدد 2559.36 دلار
ژاکت سبک 20.00 دلار 184 عدد 3,680.00 دلار
کفش مارکو 28.49 دلار 69 عدد 1965.81 دلار
کمر بلند ASOS Ridley 79.49 دلار 82 عدد 6518.18 دلار
                                                    \u003ctable class\u003d\
                                                

میز حاشیه دار

اضافه کردن.table-bordered for borders on all sides of the table and cells.

کاربر شماره حساب. تعادل عمل
table-user Risa D. Pearson AC336 508 2157 24 جولای 1950
table-user Ann C. Thompson SB646 473 2057 25 ژانویه 1959
table-user Paul J. Friend DL281 308 0793 1 سپتامبر 1939
table-user Sean C. Nguyen CA269 714 6825 5 فوریه 1994
                                                    \u003ctable class\u003d\
                                                

جدول رنگ حاشیه دار

اضافه کردن.table-bordered & .border-primary can be added to change colors.

کاربر شماره حساب. تعادل عمل
table-user Risa D. Pearson AC336 508 2157 24 جولای 1950
table-user Ann C. Thompson SB646 473 2057 25 ژانویه 1959
table-user Paul J. Friend DL281 308 0793 1 سپتامبر 1939
table-user Sean C. Nguyen CA269 714 6825 5 فوریه 1994
                                                    \u003ctable class\u003d\
                                                

همیشه پاسخگو

در هر نقطه شکست، استفاده کنید.table-responsive for horizontally scrolling tables. Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل
1 سلول سلول سلول سلول سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول سلول سلول سلول سلول
                                                    \u003ctable class\u003d\
                                                

مثال پایه بدون حاشیه

اضافه کردن.table-borderless for a table without borders.

نام شماره تلفن تاریخ تولد فعال؟
ریسا دی. پیرسون 336-508-2157 24 جولای 1950
آن سی تامپسون 646-473-2057 25 ژانویه 1959
پل جی. دوست 281-308-0793 1 سپتامبر 1939
لیندا جی اسمیت 606-253-1207 3 مه 1962
                                                    \u003ctable class\u003d\
                                                

جدول بدون حاشیه معکوس

اضافه کردن.table-borderless for a table without borders.

نام شماره تلفن تاریخ تولد فعال؟
ریسا دی. پیرسون 336-508-2157 24 جولای 1950
آن سی تامپسون 646-473-2057 25 ژانویه 1959
پل جی. دوست 281-308-0793 1 سپتامبر 1939
شان سی نگوین 269-714-6825 5 فوریه 1994
                                                    \u003ctable class\u003d\
                                                

جداول فعال

یک ردیف یا سلول جدول را با افزودن a برجسته کنید.table-active class.

نام شماره تلفن تاریخ تولد فعال؟
ریسا دی. پیرسون 336-508-2157 24 جولای 1950
آن سی تامپسون 646-473-2057 25 ژانویه 1959
پل جی. دوست 281-308-0793 1 سپتامبر 1939
لیندا جی اسمیت 606-253-1207
پل جی. دوست 281-308-0793 1 سپتامبر 1939
                                                        \u003ctable class\u003d\
                                                    

لانه سازی

سبک‌های حاشیه، سبک‌های فعال و انواع جدول توسط جداول تودرتو به ارث نمی‌رسند.

نام شماره تلفن تاریخ تولد فعال؟
ریسا دی. پیرسون 336-508-2157 24 جولای 1950
نام شماره تلفن تاریخ تولد فعال؟
ریسا دی. پیرسون 336-508-2157 24 جولای 1950
آن سی تامپسون 646-473-2057 25 ژانویه 1959
لیندا جی اسمیت 606-253-1207 2 سپتامبر 1939
                                                        \u003ctable class\u003d\
                                                    
تنظیمات پوسته
Layout را انتخاب کنید
عمودی
افقی
طرح رنگی
سبک
تاریک
حالت چیدمان
مایع
جعبه دار
جدا
رنگ نوار بالای صفحه
سبک
تاریک
موقعیت چیدمان