جدول‌های پایه

پایه ای ترین حالت جدول. در اینجا نحوه نمایش جدول های بر پایه .table بوت استرپ را مشاهده می کنید. میتوانید از هرکدام از نمونه های زیر برای جدول خودتان استفاده کنید و میتواند به همراه هر نوع جدول بوت استرپ مورد استفاده قرار بگیرد.

مثال 1: جدول با فاصله بیرونی

نام نرخ مهارت نوع مکان عمل
استیو راجرز 15 هزار تومان / ساعت UI/UX دورکاری تبریز
اولیور کویین 13 هزار تومان / ساعت کانسپت های گرافیکی دورکاری تهران
استیون آمل 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
بروس وین 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز

مثال 2: جدول مینیمال بدون فاصله بیرونی.

نام نرخ مهارت نوع مکان عمل
استیو راجرز 15 هزار تومان / ساعت UI/UX دورکاری تبریز
اولیور کویین 13 هزار تومان / ساعت کانسپت های گرافیکی دورکاری تهران
استیون آمل 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
بروس وین 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز

جدل با رنگ وارونه

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

نام نرخ مهارت نوع مکان عمل
استیو راجرز 15 هزار تومان / ساعت UI/UX دورکاری تبریز
اولیور کویین 13 هزار تومان / ساعت کانسپت های گرافیکی دورکاری تهران
استیون آمل 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
بروس وین 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز

شما همچنین میتوانید با استفاده از کلاس .table-light رنگ ها را وارونه کنید - متن تیره روی زمینه روشن.

نام نرخ مهارت نوع مکان عمل
استیو راجرز 15 هزار تومان / ساعت UI/UX دورکاری تبریز
اولیور کویین 13 هزار تومان / ساعت کانسپت های گرافیکی دورکاری تهران
استیون آمل 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
بروس وین 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز

جدول با سرتیتر سفارشی

مشابه جدول ها و جدول های تیره از کلاس های تغییر دهنده .thead-light یا .thead-dark برای نمایش <thead>ها به رنگ روشن یا تیره استفاده کنید.

نام نرخ مهارت نوع مکان عمل
استیو راجرز 15 هزار تومان / ساعت UI/UX دورکاری تبریز
اولیور کویین 13 هزار تومان / ساعت کانسپت های گرافیکی دورکاری تهران
استیون آمل 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
بروس وین 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز

سطر های راه راه

از .table-striped برای افزودن طرح راه راه به سطر های داخل <tbody> استفاده کنید. این طرح دهی در IE8 و پایین تر کار نمی کند زیرا در آن از انتخابگر CSS :nth-child استفاده شده است که در این مرورگر ها پشتیبانی نمی شود.

نام نرخ مهارت نوع مکان عمل
استیو راجرز 15 هزار تومان / ساعت UI/UX دورکاری تبریز
اولیور کویین 13 هزار تومان / ساعت کانسپت های گرافیکی دورکاری تهران
استیون آمل 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
بروس وین 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز

سطر های راه راه وارونه تیره

از کلاس .table-dark به همراه .table-striped برای افزودن طرح راه راه به سطر های داخل <tbody> در جدول با رنگ وارونه استفاده کنید. این طرح دهی در IE8 و پایین تر کار نمی کند زیرا در آن از انتخابگر CSS :nth-child استفاده شده است که در این مرورگر ها پشتیبانی نمی شود.

نام نرخ مهارت نوع مکان عمل
استیو راجرز 15 هزار تومان / ساعت UI/UX دورکاری تبریز
اولیور کویین 13 هزار تومان / ساعت کانسپت های گرافیکی دورکاری تهران
استیون آمل 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
بروس وین 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز

جدول خط دار

کلاس .table-bordered را برای نمایش خط در همه جهت های جدول و خانه های جدول اضافه کنید. برای جدول های با رنگ وارونه تیره کلاس .table-dark را به همراه .table-bordered اضافه کنید.

نام نرخ مهارت نوع مکان عمل
استیو راجرز 15 هزار تومان / ساعت UI/UX دورکاری تبریز
اولیور کویین 13 هزار تومان / ساعت کانسپت های گرافیکی دورکاری تهران
استیون آمل 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
بروس وین 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز

جدول بدون خط

کلاس .table-borderless را برای یک جدول بدون خط اضافه کنید. همچنین میتواند برای جدول های تیره استفاده شود.

نام نرخ مهارت نوع مکان عمل
استیو راجرز 15 هزار تومان / ساعت UI/UX دورکاری تبریز
اولیور کویین 13 هزار تومان / ساعت کانسپت های گرافیکی دورکاری تهران
استیون آمل 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
بروس وین 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز

سطر های قابل Hover

کلاس .table-hover را برای فعال کردن وضعیت هاور سطر های جدول که داخل یک <tbody> قرار دارند اضافه کنید.

نام نرخ مهارت نوع مکان عمل
استیو راجرز 15 هزار تومان / ساعت UI/UX دورکاری تبریز
اولیور کویین 13 هزار تومان / ساعت کانسپت های گرافیکی دورکاری تهران
استیون آمل 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
بروس وین 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز

کلاس های کاربردی

از کلاس های کاربردی برای تغییر رنگ سطر ها یا سلول های جدول استفاده کنید. برای اطلاعات بیشتر اینجا را مطالعه کنید.

نام نرخ مهارت نوع مکان عمل
استیو راجرز 15 هزار تومان / ساعت UI/UX دورکاری تبریز
اولیور کویین 13 هزار تومان / ساعت کانسپت های گرافیکی دورکاری تهران
استیون آمل 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
بروس وین 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز
تونی استارک 15 هزار تومان / ساعت انیمیشن دورکاری شیراز

جدول‌های واکنشگرا

جدول های واکنش گرا به جدول ها اجازه میدهند تا به سادگی در جهت افقی اسکرول شوند. هر جدولی را با افزودن کلاس .table-responsive به .table در همه viewport ها واکنش گرا کنید. یا یک breakpoit حداکثر برای واکنش گرا کردن جدول ها با افزودن کلاس .table-responsive{-sm|-md|-lg|-xl} انتخاب کنید. مستندات کامل را در اینجا بخوانید.

قطع / برش عمودی

جدول های واکنش گرا از overflow-y: hidden استفاده میکنند که هر محتوایی که فراتر از پایین یا بالای جدول قرار بگیرد را برش میدهد. به خصوص این میتواند منو های کشویی و یا هر ویجت که خارج از محدوده جدول قرار بگیرد را برش دهد.

همیشه واکنش گرا
# سرتیتر 1 سرتیتر 2 سرتیتر 3 سرتیتر 4 سرتیتر 5 سرتیتر 6 سرتیتر 7 سرتیتر 8 سرتیتر 9 سرتیتر 10 سرتیتر 11 سرتیتر 12 سرتیتر 13
استیو راجرز سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
استیو راجرز سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
استیو راجرز سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول

سفارشی سازی قالب

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

رنگ های فهرست

جمع کردن فهرست

رنگ های نوار بالایی
نکته : این گزینه تنها در حالت نوار ثابت و در هنگام اسکرول صفحه نمایش داده خواهد شد.
نوع نوار بالایی

نوع فوتر

سایه کارت

مخفی سازی دکمه اسکرول به بالا
ارتباط با ما
امروز

How can we help? 😄

7:45 ق.ظ

Hey John, I am looking for the best admin template.

Could you please help me to find it out? 🤔

7:50 ق.ظ

Stack admin is the responsive bootstrap 4 admin template.

8:01 ق.ظ