Source

جداول

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

مثال ها

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

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

# اولین آخر رسیدگی
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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

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

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

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

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر
# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر 
<table class="table">
  <thead class="thead-dark">
    <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 class="table">
  <thead class="thead-light">
    <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-stripedافزودن خط گورخر به هر ردیف جدول در داخل <tbody>.

# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر 
<table class="table table-striped">
  <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>
# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر 
<table class="table table-striped table-dark">
  <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-borderedحاشیه ها را در همه طرف جدول و سلول ها اضافه کنید.

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

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

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

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

میز کوچک

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

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

<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-active">...</td>

  <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>

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

# سرفصل سرفصل
1 سلول سلول
2 سلول سلول
3 سلول سلول
4 سلول سلول
5 سلول سلول
6 سلول سلول
7 سلول سلول
8 سلول سلول
9 سلول سلول 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

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

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

جدول‌های واکنش‌گرا را با پیچاندن هر کدام .tableبا .table-responsive{-sm|-md|-lg|-xl}، ایجاد کنید، و جدول را به صورت افقی در هر max-widthنقطه شکست به ترتیب تا 576 پیکسل، 768 پیکسل، 992 پیکسل و 1120 پیکسل پیمایش کنید.

توجه داشته باشید که از آنجایی که مرورگرها در حال حاضر از پرس‌و‌جوهای زمینه محدوده پشتیبانی نمی‌کنند ، ما با استفاده از مقادیر با دقت بالاتر برای این مقایسه‌ها، محدودیت‌ها min-و max-پیشوندها و درگاه‌های دید با عرض کسری (که می‌تواند تحت شرایط خاصی در دستگاه‌های با dpi بالا رخ دهد) را دور بزنیم. .

زیرنویس ها

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

لیست کاربران
# اولین آخر رسیدگی
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @چربی
3 لری پرنده @توییتر 
<table class="table">
  <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}.

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

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

همیشه پاسخگو

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

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

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

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

# سرفصل سرفصل سرفصل سرفصل سرفصل
1 سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول
# سرفصل سرفصل سرفصل سرفصل سرفصل
1 سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول
# سرفصل سرفصل سرفصل سرفصل سرفصل
1 سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول
# سرفصل سرفصل سرفصل سرفصل سرفصل
1 سلول سلول سلول سلول سلول
2 سلول سلول سلول سلول سلول
3 سلول سلول سلول سلول سلول 
<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>