رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

جداول

مستندات و مثال‌هایی برای استایل انتخاب جداول (با توجه به استفاده رایج آنها در افزونه‌های جاوا اسکریپت) با Bootstrap.

بررسی اجمالی

به دلیل استفاده گسترده از <table>عناصر در ویجت های شخص ثالث مانند تقویم ها و انتخابگرهای تاریخ، جداول Bootstrap مجاز هستند . کلاس پایه را .tableبه هر یک اضافه کنید <table>، سپس با کلاس های اصلاح کننده اختیاری یا سبک های سفارشی ما گسترش دهید. همه سبک‌های جدول در Bootstrap به ارث برده نمی‌شوند، به این معنی که هر جدول تودرتو را می‌توان مستقل از والد استایل‌بندی کرد.

با استفاده از ابتدایی ترین نشانه گذاری جدول، در اینجا نحوه .tableظاهر جداول مبتنی بر جدول در بوت استرپ است.

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

انواع

از کلاس های متنی برای رنگ آمیزی جداول، ردیف های جدول یا سلول های فردی استفاده کنید.

کلاس سرفصل سرفصل
پیش فرض سلول سلول
اولیه سلول سلول
ثانوی سلول سلول
موفقیت سلول سلول
خطر سلول سلول
هشدار سلول سلول
اطلاعات سلول سلول
سبک سلول سلول
تاریک سلول سلول
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>
انتقال معنا به فناوری های کمکی

استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .visually-hiddenکلاس، گنجانده شده است.

جداول تاکیدی

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

برای .table-stripedافزودن خط گورخر به هر ردیف جدول در داخل <tbody>.

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-striped">
  ...
</table>

این کلاس ها را می توان به انواع جدول نیز اضافه کرد:

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-dark table-striped">
  ...
</table>
# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-success table-striped">
  ...
</table>

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

برای فعال کردن .table-hoverحالت شناور در ردیف‌های جدول در یک <tbody>.

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-hover">
  ...
</table>
# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-dark table-hover">
  ...
</table>

این ردیف های شناور را می توان با نوع راه راه نیز ترکیب کرد:

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-striped table-hover">
  ...
</table>

جداول فعال

.table-activeبا اضافه کردن یک کلاس ، یک ردیف یا سلول جدول را برجسته کنید .

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

انواع و جداول تاکیدی چگونه کار می کنند؟

برای جداول برجسته ( ردیف‌های راه راه ، ردیف‌های قابل شناور و جداول فعال )، از تکنیک‌هایی استفاده کردیم تا این افکت‌ها برای همه انواع جدول ما کارایی داشته باشند :

  • با تنظیم پس‌زمینه سلول جدول با --bs-table-bgویژگی سفارشی شروع می‌کنیم. سپس همه انواع جدول، آن ویژگی سفارشی را برای رنگ آمیزی سلول های جدول تنظیم می کنند. به این ترتیب اگر از رنگ های نیمه شفاف به عنوان پس زمینه میز استفاده شود، دچار مشکل نمی شویم.
  • سپس یک سایه باکس داخلی روی سلول‌های جدول اضافه box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);می‌کنیم background-color. از آنجا که ما از یک پخش بزرگ و بدون تاری استفاده می کنیم، رنگ یکنواخت خواهد بود. از آنجایی که --bs-table-accent-bgبه طور پیش‌فرض تنظیم نشده است، سایه جعبه پیش‌فرض نداریم.
  • هنگامی که یکی .table-striped، .table-hoverیا .table-activeکلاس ها اضافه می شوند، --bs-table-accent-bgبرای رنگ آمیزی پس زمینه، روی یک رنگ نیمه شفاف تنظیم می شود.
  • برای هر نوع جدول، --bs-table-accent-bgبسته به آن رنگ، رنگی با بالاترین کنتراست تولید می کنیم. به عنوان مثال، رنگ تاکیدی برای .table-primaryتیره تر است در حالی که .table-darkدارای رنگ تاکیدی روشن تر است.
  • رنگ های متن و حاشیه به همین ترتیب تولید می شوند و رنگ های آنها به طور پیش فرض به ارث می رسد.

پشت صحنه به این شکل است:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

حاشیه های جدول

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

.table-borderedحاشیه ها را در همه طرف جدول و سلول ها اضافه کنید.

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-bordered">
  ...
</table>

ابزارهای رنگ حاشیه را می توان برای تغییر رنگ اضافه کرد:

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-bordered border-primary">
  ...
</table>

جداول بدون حاشیه

.table-borderlessبرای جدول بدون حاشیه اضافه کنید.

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-borderless">
  ...
</table>
# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-dark table-borderless">
  ...
</table>

میزهای کوچک

با نصف کردن تمام سلول‌ها، آن را اضافه .table-smکنید تا .tableفشرده‌تر شود .padding

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-sm">
  ...
</table>
# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-dark table-sm">
  ...
</table>

چیدمان عمودی

سلول های جدول <thead>همیشه به صورت عمودی به سمت پایین تراز می شوند. سلول های جدول در تراز خود را از و به طور پیش فرض در بالا تراز به <tbody>ارث می برند . <table>از کلاس های تراز عمودی برای تراز مجدد در صورت نیاز استفاده کنید.

سرفصل 1 سرفصل 2 سرفصل 3 سرفصل 4
این سلول vertical-align: middle;از جدول ارث می برد این سلول vertical-align: middle;از جدول ارث می برد این سلول vertical-align: middle;از جدول ارث می برد این در اینجا متنی است که در نظر گرفته شده تا فضای عمودی زیادی را اشغال کند تا نشان دهد که تراز عمودی در سلول های قبلی چگونه کار می کند.
این سلول vertical-align: bottom;از ردیف جدول ارث می برد این سلول vertical-align: bottom;از ردیف جدول ارث می برد این سلول vertical-align: bottom;از ردیف جدول ارث می برد این در اینجا متنی است که در نظر گرفته شده تا فضای عمودی زیادی را اشغال کند تا نشان دهد که تراز عمودی در سلول های قبلی چگونه کار می کند.
این سلول vertical-align: middle;از جدول ارث می برد این سلول vertical-align: middle;از جدول ارث می برد این سلول به سمت بالا تراز شده است. این در اینجا متنی است که در نظر گرفته شده تا فضای عمودی زیادی را اشغال کند تا نشان دهد که تراز عمودی در سلول های قبلی چگونه کار می کند.
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

لانه سازی

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

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
سرتیتر سرتیتر سرتیتر
آ اولین آخر
ب اولین آخر
سی اولین آخر
3 لری پرنده @توییتر
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

نحوه کار لانه سازی

برای جلوگیری از نشت هر> سبکی به جداول تودرتو، از انتخابگر ترکیب کننده فرزند ( ) در CSS خود استفاده می کنیم. از آنجایی که ما باید تمام tds و ths را در thead, tbodyو و tfootهدف قرار دهیم، انتخابگر ما بدون آن بسیار طولانی به نظر می رسد. به این ترتیب، ما از انتخابگر نسبتاً عجیب و غریب .table > :not(caption) > * > *برای هدف قرار دادن تمام tds و ths های جدول استفاده می کنیم .table، اما هیچ کدام از جدول های تودرتو بالقوه.

توجه داشته باشید که اگر <tr>s را به‌عنوان فرزندان مستقیم جدول اضافه کنید، آن‌ها <tr>به طور پیش‌فرض در یک <tbody>قرار می‌گیرند، بنابراین انتخابگرهای ما همانطور که در نظر گرفته شده است کار می‌کنند.

آناتومی

سر میز

مشابه جداول و جداول تیره، از کلاس های اصلاح کننده استفاده کنید .table-lightیا s .table-darkرا <thead>خاکستری روشن یا تیره نشان دهید.

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

پای میز

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
پاورقی پاورقی پاورقی پاورقی
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

زیرنویس ها

<caption>عملکردی مانند عنوان یک جدول است . این به کاربران دارای صفحه‌خوان کمک می‌کند تا جدولی را پیدا کنند و بفهمند درباره چیست و تصمیم بگیرند که آیا می‌خواهند آن را بخوانند.

لیست کاربران
# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

شما همچنین می توانید <caption>در بالای جدول با .caption-top.

لیست کاربران
# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
<table class="table caption-top">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

جداول پاسخگو

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

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

جداول ریسپانسیو از استفاده overflow-y: hiddenمی‌کنند که هر محتوایی را که فراتر از لبه‌های پایین یا بالای جدول است، حذف می‌کند. به طور خاص، این می تواند منوهای کشویی و سایر ویجت های شخص ثالث را حذف کند.

همیشه پاسخگو

در هر نقطه شکست، .table-responsiveبرای جدول‌های پیمایش افقی استفاده کنید.

# سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل
1 سلول سلول سلول سلول سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول سلول سلول سلول سلول
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

نقطه انفصال خاص

در صورت نیاز برای .table-responsive{-sm|-md|-lg|-xl|-xxl}ایجاد جداول پاسخگو تا یک نقطه شکست خاص استفاده کنید. از آن نقطه شکست به بالا، جدول به طور معمول رفتار می کند و به صورت افقی حرکت نمی کند.

این جداول ممکن است شکسته به نظر برسند تا زمانی که سبک‌های واکنش‌گرای آن‌ها در عرض‌های نمای خاص اعمال شود.

# سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل
1 سلول سلول سلول سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول سلول سلول سلول
# سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل
1 سلول سلول سلول سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول سلول سلول سلول
# سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل
1 سلول سلول سلول سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول سلول سلول سلول
# سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل
1 سلول سلول سلول سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول سلول سلول سلول
# سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل
1 سلول سلول سلول سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول سلول سلول سلول
# سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل سرفصل
1 سلول سلول سلول سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول سلول سلول سلول
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>

ساس

متغیرها

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

حلقه

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

سفارشی کردن

  • متغیرهای عامل ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) برای تعیین کنتراست در انواع جدول استفاده می شود.
  • به غیر از انواع میز روشن و تیره، رنگ های تم توسط $table-bg-levelمتغیر روشن می شوند.