جداول پایه

  1. جداول
  2. جداول پایه

جدول پیش فرض

استفاده کنید table کلاس برای نمایش جدول پیش فرض مبتنی بر بوت استرپ.

شناسه مشتری تاریخ فاکتور اقدام
#VZ2110 بابی دیویس 15 اکتبر 2021 2300 دلار مشاهده بیشتر
#VZ2109 کریستوفر نیل 7 اکتبر 2021 5500 دلار مشاهده بیشتر
#VZ2108 میمون کاری 5 اکتبر 2021 2420 دلار مشاهده بیشتر
#VZ2107 جیمز وایت 2 اکتبر 2021 7452 دلار مشاهده بیشتر 
 <table class="table table-nowrap">
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Customer</th>
            <th scope="col">Date</th>
            <th scope="col">Invoice</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row"><a href="#" class="fw-semibold">#VZ2110</a></th>
            <td>Bobby Davis</td>
            <td>October 15, 2021</td>
            <td>$2,300</td>
            <td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-left-line align-middle"></i></a></td>
        </tr>
        <tr>
            <th scope="row"><a href="#" class="fw-semibold">#VZ2109</a></th>
            <td>Christopher Neal</td>
            <td>October 7, 2021</td>
            <td>$5,500</td>
            <td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-left-line align-middle"></i></a></td>
        </tr>
        <tr>
            <th scope="row"><a href="#" class="fw-semibold">#VZ2108</a></th>
            <td>Monkey Karry</td>
            <td>October 5, 2021</td>
            <td>$2,420</td>
            <td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-left-line align-middle"></i></a></td>
        </tr>
        <tr>
            <th scope="row"><a href="#" class="fw-semibold">#VZ2107</a></th>
            <td>James White</td>
            <td>October 2, 2021</td>
            <td>$7,452</td>
            <td><a href="javascript:void(0);" class="link-success">View More <i class="ri-arrow-left-line align-middle"></i></a></td>
        </tr>
    </tbody>
</table>

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

استفاده کنید table-striped کلاس برای افزودن خط زبرا به هر ردیف جدول در .

شناسه مشتری تاریخ فاکتور اقدام
01 بابی دیویس 14 نوامبر 2021 2410 دلار تایید شد
02 کریستوفر نیل 21 نوامبر 2021 1450 دلار در انتظار
03 میمون کاری 24 نوامبر 2021 3500 دلار تایید شد
04 آرون جیمز 25 نوامبر 2021 6875 دلار لغو شد 
 <!-- Striped Rows -->
<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">Id</th>
            <th scope="col">Customer</th>
            <th scope="col">Date</th>
            <th scope="col">Invoice</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Bobby Davis</td>
            <td>Nov 14, 2021</td>
            <td>$2,410</td>
            <td><span class="badge bg-success">Confirmed</span></td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Christopher Neal</td>
            <td>Nov 21, 2021</td>
            <td>$1,450</td>
            <td><span class="badge bg-warning">Waiting</span></td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Monkey Karry</td>
            <td>Nov 24, 2021</td>
            <td>$3,500</td>
            <td><span class="badge bg-success">Confirmed</span></td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Aaron James</td>
            <td>Nov 25, 2021</td>
            <td>$6,875</td>
            <td><span class="badge bg-danger">Cancelled</span></td>
        </tr>
    </tbody>
</table>

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

استفاده کنید. table-striped-columns برای افزودن خط گورخر به هر ستون جدول.

 شناسه نام تاریخ مجموع وضعیت اقدام
#VL2110 ویلیام المور 07 اکتبر 2021 24.05 دلار پرداخت شده است
#VL2109 جورجی وینترز 07 اکتبر 2021 26.15 دلار پرداخت شده است
#VL2108 ویتنی مایر 06 اکتبر 2021 21.25 دلار بازپرداخت
#VL2107 جاستین مایر 05 اکتبر 2021 25.03 دلار پرداخت شده است 
 <div class="table-responsive table-card">
    <table class="table table-nowrap table-striped-columns mb-0">
        <thead class="table-light">
            <tr>
                <th scope="col">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="cardtableCheck">
                        <label class="form-check-label" for="cardtableCheck"></label>
                    </div>
                </th>
                <th scope="col">Id</th>
                <th scope="col">Name</th>
                <th scope="col">Date</th>
                <th scope="col">Total</th>
                <th scope="col">Status</th>
                <th scope="col">Action</th>   
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="cardtableCheck01">
                        <label class="form-check-label" for="cardtableCheck01"></label>
                    </div>
                </td>
                <td><a href="#" class="fw-semibold">#VL2110</a></td>
                <td>William Elmore</td>
                <td>07 Oct, 2021</td>
                <td>$24.05</td>
                <td><span class="badge bg-success">Paid</span></td>
                <td>
                    <button type="button" class="btn btn-sm btn-light">Details</button>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="cardtableCheck02">
                        <label class="form-check-label" for="cardtableCheck02"></label>
                    </div>
                </td>
                <td><a href="#" class="fw-semibold">#VL2109</a></td>
                <td>Georgie Winters</td>
                <td>07 Oct, 2021</td>
                <td>$26.15</td>
                <td><span class="badge bg-success">Paid</span></td>
                <td>
                    <button type="button" class="btn btn-sm btn-light">Details</button>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="cardtableCheck03">
                        <label class="form-check-label" for="cardtableCheck03"></label>
                    </div>
                </td>
                <td><a href="#" class="fw-semibold">#VL2108</a></td>
                <td>Whitney Meier</td>
                <td>06 Oct, 2021</td>
                <td>$21.25</td>
                <td><span class="badge bg-danger">Refund</span></td>
                <td>
                    <button type="button" class="btn btn-sm btn-light">Details</button>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="cardtableCheck04">
                        <label class="form-check-label" for="cardtableCheck04"></label>
                    </div>
                </td>
                <td><a href="#" class="fw-semibold">#VL2107</a></td>
                <td>Justin Maier</td>
                <td>05 Oct, 2021</td>
                <td>$25.03</td>
                <td><span class="badge bg-success">Paid</span></td>
                <td>
                    <button type="button" class="btn btn-sm btn-light">Details</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

رنگ جداول

استفاده کنید table-dark کلاس برای ست کردن بدنه میز رنگ تیره و table-success کلاس برای تنظیم موفقیت بدنه جدول رنگ به ترتیب. استفاده کنید table- کلاس با تنوع رنگی مختلف برای تنظیم رنگ بدنه میز مورد نیاز.

شناسه مشتری تاریخ فاکتور
01 بابی دیویس 14 نوامبر 2021 2410 دلار
02 کریستوفر نیل 21 نوامبر 2021 1450 دلار
03 میمون کاری 24 نوامبر 2021 3500 دلار
04 آرون جیمز 25 نوامبر 2021 6875 دلار
شناسه فاکتور مقدار تاریخ وضعیت اقدام
01 طرح اساسی 860 دلار 22 نوامبر 2021 مشترک شد
02 طرح حق بیمه 1200 دلار 10 نوامبر 2021 لغو اشتراک
03 طرح اساسی 860 دلار 19 نوامبر 2021 مشترک شد
04 طرح شرکتی 1599 دلار 22 نوامبر 2021 مشترک شد 
 <!-- Table Dark -->
<table class="table table-dark table-striped table-nowrap">
    <thead>
        <tr>
            <th scope="col">Id</th>
            <th scope="col">Customer</th>
            <th scope="col">Date</th>
            <th scope="col">Invoice</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Bobby Davis</td>
            <td>Nov 14, 2021</td>
            <td>$2,410</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Christopher Neal</td>
            <td>Nov 21, 2021</td>
            <td>$1,450</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Monkey Karry</td>
            <td>Nov 24, 2021</td>
            <td>$3,500</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Aaron James</td>
            <td>Nov 25, 2021</td>
            <td>$6,875</td>
        </tr>
    </tbody>
</table> 

 <table class="table table-success table-striped align-middle table-nowrap mb-0">
    <thead>
        <tr>
            <th scope="col">Id</th>
            <th scope="col">Invoice</th>
            <th scope="col">Amount</th>
            <th scope="col">Date</th>
            <th scope="col">Status</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Basic Plan</td>
            <td>$860</td>
            <td>Nov 22, 2021</td>
            <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
            <td>
                <div class="hstack gap-3 flex-wrap">
                    <a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
                    <a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Premium Plan</td>
            <td>$1200</td>
            <td>Nov 10, 2021</td>
            <td><i class="ri-close-circle-line align-middle text-danger"></i> Unsubscribed</td>
            <td>
                <div class="hstack gap-3 flex-wrap">
                    <a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
                    <a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Basic Plan</td>
            <td>$860</td>
            <td>Nov 19, 2021</td>
            <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
            <td>
                <div class="hstack gap-3 flex-wrap">
                    <a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
                    <a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Corporate Plan</td>
            <td>$1599</td>
            <td>Nov 22, 2021</td>
            <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
            <td>
                <div class="hstack gap-3 flex-wrap">
                    <a href="javascript:void(0);" class="link-success fs-15"><i class="ri-edit-2-line"></i></a>
                    <a href="javascript:void(0);" class="link-danger fs-15"><i class="ri-delete-bin-line"></i></a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

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

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

 شناسه سفارش خرید کنید مشتری قیمت اقدام
#541254265 آمازون کلیو کارسون 4521 دلار
#744145235 خریداران جاستون آیشمن 7546 دلار
#9855126598 فلیپ کارت بتی جانسون 1350 دلار
#847512653 خریداران ماریتزا بلاندا 4521 دلار
شناسه فاکتور مقدار تاریخ وضعیت اقدام
01 طرح اساسی 860 دلار 22 نوامبر 2021 مشترک شد
02 طرح حق بیمه 1200 دلار 10 نوامبر 2021 لغو اشتراک
03 طرح اساسی 860 دلار 19 نوامبر 2021 مشترک شد
04 طرح شرکتی 1599 دلار 22 نوامبر 2021 مشترک شد 
 <!-- Hoverable Rows -->
<table class="table table-hover table-nowrap mb-0">
    <thead>
        <tr>
            <th scope="col">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="checkAll" value="option1">
                </div>
            </th>
            <th scope="col">Order ID</th>
            <th scope="col">Shop</th>
            <th scope="col">Customer</th>
            <th scope="col">Price</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option1" checked>
                </div>
            </th>
            <td>#541254265</td>
            <td>Amezon</td>
            <td>Cleo Carson</td>
            <td>$4,521</td>
            <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
        </tr>
        <tr>
            <th scope="row">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option1" checked>
                </div>
            </th>
            <td>#744145235</td>
            <td>Shoppers</td>
            <td>Juston Eichmann</td>
            <td>$7,546</td>
            <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
        </tr>
        <tr>
            <th scope="row">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="option1">
                </div>
            </th>
            <td>#9855126598</td>
            <td>Flipkart</td>
            <td>Bettie Johson</td>
            <td>$1,350</td>
            <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
        </tr>
        <tr>
            <th scope="row">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="option1">
                </div>
            </th>
            <td>#847512653</td>
            <td>Shoppers</td>
            <td>Maritza Blanda</td>
            <td>$4,521</td>
            <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
        </tr>
    </tbody>
</table> 

 <table class="table table-hover table-striped align-middle table-nowrap mb-0">
    <thead>
        <tr>
            <th scope="col">Id</th>
            <th scope="col">Invoice</th>
            <th scope="col">Amount</th>
            <th scope="col">Date</th>
            <th scope="col">Status</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Basic Plan</td>
            <td>$860</td>
            <td>Nov 22, 2021</td>
            <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
            <td>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck1" checked="">
                    <label class="form-check-label" for="SwitchCheck1">Yes/No</label>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Premium Plan</td>
            <td>$1200</td>
            <td>Nov 10, 2021</td>
            <td><i class="ri-close-circle-line align-middle text-danger"></i> Unsubscribed</td>
            <td>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck2">
                    <label class="form-check-label" for="SwitchCheck2">Yes/No</label>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Basic Plan</td>
            <td>$860</td>
            <td>Nov 19, 2021</td>
            <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
            <td>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck3">
                    <label class="form-check-label" for="SwitchCheck3">Yes/No</label>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Corporate Plan</td>
            <td>$1599</td>
            <td>Nov 22, 2021</td>
            <td><i class="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
            <td>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" checked="">
                    <label class="form-check-label" for="SwitchCheck4">Yes/No</label>
                </div>
            </td>
        </tr>
    </tbody>
</table>

جداول کارت

استفاده کنید table-card کلاس برای نشان دادن جدول مبتنی بر کارت در یک .

 شناسه نام تاریخ مجموع وضعیت اقدام
#VL2110 ویلیام المور 07 اکتبر 2021 24.05 دلار پرداخت شده است
#VL2109 جورجی وینترز 07 اکتبر 2021 26.15 دلار پرداخت شده است
#VL2108 ویتنی مایر 06 اکتبر 2021 21.25 دلار بازپرداخت
#VL2107 جاستین مایر 05 اکتبر 2021 25.03 دلار پرداخت شده است 
 <div class="table-responsive table-card">
    <table class="table table-nowrap mb-0">
        <thead class="table-light">
            <tr>
                <th scope="col">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="cardtableCheck">
                        <label class="form-check-label" for="cardtableCheck"></label>
                    </div>
                </th>
                <th scope="col">Id</th>
                <th scope="col">Name</th>
                <th scope="col">Date</th>
                <th scope="col">Total</th>
                <th scope="col">Status</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="cardtableCheck01">
                        <label class="form-check-label" for="cardtableCheck01"></label>
                    </div>
                </td>
                <td><a href="#" class="fw-semibold">#VL2110</a></td>
                <td>William Elmore</td>
                <td>07 Oct, 2021</td>
                <td>$24.05</td>
                <td><span class="badge bg-success">Paid</span></td>
                <td>
                    <button type="button" class="btn btn-sm btn-light">Details</button>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="cardtableCheck02">
                        <label class="form-check-label" for="cardtableCheck02"></label>
                    </div>
                </td>
                <td><a href="#" class="fw-semibold">#VL2109</a></td>
                <td>Georgie Winters</td>
                <td>07 Oct, 2021</td>
                <td>$26.15</td>
                <td><span class="badge bg-success">Paid</span></td>
                <td>
                    <button type="button" class="btn btn-sm btn-light">Details</button>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="cardtableCheck03">
                        <label class="form-check-label" for="cardtableCheck03"></label>
                    </div>
                </td>
                <td><a href="#" class="fw-semibold">#VL2108</a></td>
                <td>Whitney Meier</td>
                <td>06 Oct, 2021</td>
                <td>$21.25</td>
                <td><span class="badge bg-danger">Refund</span></td>
                <td>
                    <button type="button" class="btn btn-sm btn-light">Details</button>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="cardtableCheck04">
                        <label class="form-check-label" for="cardtableCheck04"></label>
                    </div>
                </td>
                <td><a href="#" class="fw-semibold">#VL2107</a></td>
                <td>Justin Maier</td>
                <td>05 Oct, 2021</td>
                <td>$25.03</td>
                <td><span class="badge bg-success">Paid</span></td>
                <td>
                    <button type="button" class="btn btn-sm btn-light">Details</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

جداول فعال

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

 شناسه سفارش خرید کنید مشتری قیمت اقدام
#541254265 آمازون کلیو کارسون 4521 دلار
#744145235 خریداران جاستون آیشمن 7546 دلار
#9855126598 فلیپ کارت بتی جانسون 1350 دلار
#847512653 خریداران ماریتزا بلاندا 4521 دلار 
 <!-- Active Tables -->
<table class="table table-nowrap mb-0">
    <thead>
        <tr>
            <th scope="col">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="activetableCheck">
                    <label class="form-check-label" for="activetableCheck"></label>
                </div>
            </th>
            <th scope="col">Order ID</th>
            <th scope="col">Shop</th>
            <th scope="col">Customer</th>
            <th scope="col">Price</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="activetableCheck01" checked>
                    <label class="form-check-label" for="activetableCheck01"></label>
                </div>
            </th>
            <td>#541254265</td>
            <td>Amezon</td>
            <td>Cleo Carson</td>
            <td>$4,521</td>
            <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
        </tr>
        <tr class="table-active">
            <th scope="row">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="activetableCheck02" checked>
                    <label class="form-check-label" for="activetableCheck02"></label>
                </div>
            </th>
            <td>#744145235</td>
            <td>Shoppers</td>
            <td>Juston Eichmann</td>
            <td>$7,546</td>
            <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
        </tr>
        <tr>
            <th scope="row">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="activetableCheck03">
                    <label class="form-check-label" for="activetableCheck03"></label>
                </div>
            </th>
            <td>#9855126598</td>
            <td>Flipkart</td>
            <td>Bettie Johson</td>
            <td>$1,350</td>
            <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
        </tr>
        <tr>
            <th scope="row">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="activetableCheck04">
                    <label class="form-check-label" for="activetableCheck04"></label>
                </div>
            </th>
            <td>#847512653</td>
            <td>Shoppers</td>
            <td class="table-active">Maritza Blanda</td>
            <td>$4,521</td>
            <td><a href="javascript:void(0);"><i class="ri-download-2-line"></i></a></td>
        </tr>
    </tbody>
</table>

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

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

شناسه عنوان وضعیت مأمور قیمت
01 UX جدید را پیاده سازی کنید عقب ماندگی لانورا ساندووال 4521 دلار
02 نحو طراحی در حال انجام است کالوین گرت 7546 دلار
03 منابع قابل تنظیم انجام شد فلورانس گوزمن 1350 دلار
04 برنامه های افزودنی را پیاده سازی کنید در حال انجام است ماریتزا بلاندا 4521 دلار 
 <!-- Bordered Tables -->
<table class="table table-bordered table-nowrap">
    <thead>
        <tr>
            <th scope="col">Id</th>
            <th scope="col">Title</th>
            <th scope="col">Status</th>
            <th scope="col">Assignee</th>
            <th scope="col">Price</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Implement new UX</td>
            <td><span class="badge bg-primary-subtle text-primary">Backlog</span></td>
            <td>Lanora Sandoval</td>
            <td>$4,521</td>
            <td>
                <div class="dropdown">
                    <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ri-more-2-fill"></i>
                    </a>
                  
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li><a class="dropdown-item" href="#">View</a></li>
                        <li><a class="dropdown-item" href="#">Edit</a></li>
                        <li><a class="dropdown-item" href="#">Delete</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Design syntax</td>
            <td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
            <td>Calvin Garrett</td>
            <td>$7,546</td>
            <td>
                <div class="dropdown">
                    <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ri-more-2-fill"></i>
                    </a>
                  
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li><a class="dropdown-item" href="#">View</a></li>
                        <li><a class="dropdown-item" href="#">Edit</a></li>
                        <li><a class="dropdown-item" href="#">Delete</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Configurable resources</td>
            <td><span class="badge bg-success-subtle text-success">Done</span></td>
            <td>Florence Guzman</td>
            <td>$1,350</td>
            <td>
                <div class="dropdown">
                    <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ri-more-2-fill"></i>
                    </a>
                  
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li><a class="dropdown-item" href="#">View</a></li>
                        <li><a class="dropdown-item" href="#">Edit</a></li>
                        <li><a class="dropdown-item" href="#">Delete</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Implement extensions</td>
            <td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
            <td>Maritza Blanda</td>
            <td>$4,521</td>
            <td>
                <div class="dropdown">
                    <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ri-more-2-fill"></i>
                    </a>
                  
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li><a class="dropdown-item" href="#">View</a></li>
                        <li><a class="dropdown-item" href="#">Edit</a></li>
                        <li><a class="dropdown-item" href="#">Delete</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>
</table>

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

استفاده کنید border- کلاس با کلاس تنوع رنگ برای تنظیم رنگ حاشیه جدول.

شناسه عنوان وضعیت مأمور قیمت
01 UX جدید را پیاده سازی کنید عقب ماندگی لانورا ساندووال 4521 دلار
02 نحو طراحی در حال انجام است کالوین گرت 7546 دلار
03 منابع قابل تنظیم انجام شد فلورانس گوزمن 1350 دلار
04 برنامه های افزودنی را پیاده سازی کنید در حال انجام است ماریتزا بلاندا 4521 دلار 
 <!-- Tables Border Colors -->
<table class="table table-bordered border-secondary table-nowrap">
    <thead>
        <tr>
            <th scope="col">Id</th>
            <th scope="col">Title</th>
            <th scope="col">Status</th>
            <th scope="col">Assignee</th>
            <th scope="col">Price</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Implement new UX</td>
            <td><span class="badge bg-primary-subtle text-primary">Backlog</span></td>
            <td>Lanora Sandoval</td>
            <td>$4,521</td>
            <td>
                <div class="dropdown">
                    <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ri-more-2-fill"></i>
                    </a>
                  
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li><a class="dropdown-item" href="#">View</a></li>
                        <li><a class="dropdown-item" href="#">Edit</a></li>
                        <li><a class="dropdown-item" href="#">Delete</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Design syntax</td>
            <td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
            <td>Calvin Garrett</td>
            <td>$7,546</td>
            <td>
                <div class="dropdown">
                    <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ri-more-2-fill"></i>
                    </a>
                  
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li><a class="dropdown-item" href="#">View</a></li>
                        <li><a class="dropdown-item" href="#">Edit</a></li>
                        <li><a class="dropdown-item" href="#">Delete</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Configurable resources</td>
            <td><span class="badge bg-success-subtle text-success">Done</span></td>
            <td>Florence Guzman</td>
            <td>$1,350</td>
            <td>
                <div class="dropdown">
                    <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ri-more-2-fill"></i>
                    </a>
                  
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li><a class="dropdown-item" href="#">View</a></li>
                        <li><a class="dropdown-item" href="#">Edit</a></li>
                        <li><a class="dropdown-item" href="#">Delete</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Implement extensions</td>
            <td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
            <td>Maritza Blanda</td>
            <td>$4,521</td>
            <td>
                <div class="dropdown">
                    <a href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ri-more-2-fill"></i>
                    </a>
                  
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li><a class="dropdown-item" href="#">View</a></li>
                        <li><a class="dropdown-item" href="#">Edit</a></li>
                        <li><a class="dropdown-item" href="#">Delete</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>
</table>

جداول بدون مرز

استفاده کنید table-borderless برای چیدن میز بدون حاشیه

شناسه نام عنوان شغلی تاریخ وضعیت
01 آنت بلک طراح صنعتی 10 نوامبر 2021 فعال
02 بسی کوپر طراح گرافیک 13 نوامبر 2021 فعال
03 لزلی الکساندر مدیر محصول 17 نوامبر 2021 فعال
04 لنورا سندووال مهندس برنامه های کاربردی 25 نوامبر 2021 از کار افتاده است 
 <!-- Tables Without Borders -->
<table class="table table-borderless table-nowrap">
    <thead>
        <tr>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Job Title</th>
            <th scope="col">Date</th>
            <th scope="col">Status</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Annette Black</td>
            <td>Industrial Designer</td>
            <td>10, Nov 2021</td>
            <td><span class="badge bg-success-subtle text-success">Active</span></td>
            <td>
                <div class="hstack gap-3 fs-15">
                    <a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
                    <a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Bessie Cooper</td>
            <td>Graphic Designer</td>
            <td>13, Nov 2021</td>
            <td><span class="badge bg-success-subtle text-success">Active</span></td>
            <td>
                <div class="hstack gap-3 fs-15">
                    <a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
                    <a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Leslie Alexander</td>
            <td>Product Manager</td>
            <td>17, Nov 2021</td>
            <td><span class="badge bg-success-subtle text-success">Active</span></td>
            <td>
                <div class="hstack gap-3 fs-15">
                    <a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
                    <a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
                </div>
            </td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Lenora Sandoval</td>
            <td>Applications Engineer</td>
            <td>25, Nov 2021</td>
            <td><span class="badge bg-danger-subtle text-danger">Disabled</span></td>
            <td>
                <div class="hstack gap-3 fs-15">
                    <a href="javascript:void(0);" class="link-primary"><i class="ri-settings-4-line"></i></a>
                    <a href="javascript:void(0);" class="link-danger"><i class="ri-delete-bin-5-line"></i></a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

میزهای کوچک

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

شناسه عنوان وضعیت مأمور
01 UX جدید را پیاده سازی کنید عقب ماندگی لانورا ساندووال
02 نحو طراحی در حال انجام است کالوین گرت
03 منابع قابل تنظیم انجام شد فلورانس گوزمن
04 برنامه های افزودنی را پیاده سازی کنید عقب ماندگی ماریتزا بلاندا
05 مهندس برنامه های کاربردی انجام شد لزلی الکساندر 
 <!-- Small Tables -->
<table class="table table-sm table-nowrap">
    <thead>
        <tr>
            <th scope="col">Id</th>
            <th scope="col">Title</th>
            <th scope="col">Status</th>
            <th scope="col">Assignee</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Implement new UX</td>
            <td><span class="badge bg-primary-subtle text-primary">Backlog</span></td>
            <td>Lanora Sandoval</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Design syntax</td>
            <td><span class="badge bg-secondary-subtle text-secondary">In Progress</span></td>
            <td>Calvin Garrett</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Configurable resources</td>
            <td><span class="badge bg-success-subtle text-success">Done</span></td>
            <td>Florence Guzman</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Implement extensions</td>
            <td><span class="badge bg-dark-subtle text-body">Backlog</span></td>
            <td>Maritza Blanda</td>
        </tr>
        <tr>
            <th scope="row">5</th>
            <td>Applications Engineer</td><td>
            <span class="badge bg-success-subtle text-success">Done</span></td>
            <td>Leslie Alexander</td>
        </tr>
    </tbody>
</table>

سر میز

استفاده کنید table-light یا table-dark کلاس برای ایجاد روشن یا تیره به نظر می رسد.

دانشجو دوره نویسنده پرداخت فرآیند وضعیت
میلان اسکاتلندی طراحی UI/UX میچل فلورس 450 دلار
تایید شد
جاسیکا ولز انیمیشن سه بعدی دن اوگنی 860 دلار
در انتظار
لزلی الکساندر طراحی لوگوتایپ المپیا اردن 450 دلار
در انتظار 
 <!-- Table Head -->
<table class="table align-middle table-nowrap mb-0">
    <thead class="table-light">
        <tr>
            <th scope="col">Student</th>
            <th scope="col">Course</th>
            <th scope="col">Author</th>
            <th scope="col">Payment</th>
            <th scope="col">Process</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Milana Scot</td>
            <td>UI/UX design</td>
            <td>Mitchell Flores</td>
            <td>$450</td>
            <td>
                <div class="progress progress-sm">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </td>
            <td><a href="javascript:void(0);" class="link-success">Confirmed</a></td>
        </tr>   
        <tr>
            <td>Jassica Welsh</td>
            <td>3d Animation</td>
            <td>Dan Evgeni</td>
            <td>$860</td>
            <td>
                <div class="progress progress-sm">
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </td>
            <td><a href="javascript:void(0);" class="link-warning">Waiting</a></td>
        </tr>
        <tr>
            <td>Leslie Alexander</td>
            <td>Logotype Design</td>
            <td>Olimpia Jordan</td>
            <td>$450</td>
            <td>
                <div class="progress progress-sm">
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </td>
            <td><a href="javascript:void(0);" class="link-warning">Waiting</a></td>
        </tr>
    </tbody>
</table>

پای میز

اضافه کنید <tbody> ویژگی به محتوای پاورقی گروهی در جدول HTML.

شناسه نام عنوان شغلی تاریخ پرداخت
01 آنت بلک طراح صنعتی 10 نوامبر 2021 450 دلار
02 بسی کوپر طراح گرافیک 13 نوامبر 2021 875 دلار
03 لزلی الکساندر مدیر محصول 17 نوامبر 2021 410 دلار
مجموع 940 دلار 
 <!-- Table Foot -->
<table class="table table-nowrap">
    <thead class="table-light ">
        <tr>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Job Title</th>
            <th scope="col">Date</th>
            <th scope="col">Payment</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Annette Black</td>
            <td>Industrial Designer</td>
            <td>10, Nov 2021</td>
            <td>$450</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Bessie Cooper</td>
            <td>Graphic Designer</td>
            <td>13, Nov 2021</td>
            <td>$875</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Leslie Alexander</td>
            <td>Product Manager</td>
            <td>17, Nov 2021</td>
            <td>$410</td>
        </tr>
    </tbody>
    <tfoot class="table-light">
        <tr>
            <td colspan="4">Total</td>
            <td>$940</td>
        </tr>
    </tfoot>
</table>

زیرنویس ها

شما همچنین می توانید قرار دهید <caption> ویژگی بالای جدول با caption-top کلاس

لیست کاربران
شناسه دانشجو دوره نویسنده
01 میلان اسکاتلندی طراحی UI/UX میچل فلورس
02 جاسیکا ولز انیمیشن سه بعدی دن اوگنی
03 لزلی الکساندر طراحی لوگوتایپ المپیا اردن 
 <!-- Captions -->
<table class="table caption-top table-nowrap">
    <thead class="table-light">
        <tr>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Job Title</th>
            <th scope="col">Date</th>
            <th scope="col">Payment</th>  
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Annette Black</td>
            <td>Industrial Designer</td>
            <td>10, Nov 2021</td>
            <td>$450</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Bessie Cooper</td>
            <td>Graphic Designer</td>
            <td>13, Nov 2021</td>
            <td>$875</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Leslie Alexander</td>
            <td>Product Manager</td>
            <td>17, Nov 2021</td>
            <td>$410</td>
        </tr>
    </tbody>
    <tfoot class="table-light">
        <tr>
            <td colspan="4">Total</td>
            <td>$940</td>
        </tr>
    </tfoot>
</table>

تودرتو میز

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

شناسه نام عنوان شغلی تاریخ پرداخت
01 آنت بلک طراح صنعتی 10 نوامبر 2021 450 دلار
شناسه دانشجو دوره نویسنده
من میلان اسکاتلندی انیمیشن سه بعدی جیمز بلک
II جاستون آیشمن نحو طراحی المپیا اردن
02 بسی کوپر طراح گرافیک 13 نوامبر 2021 875 دلار
03 لزلی الکساندر مدیر محصول 16 نوامبر 2021 410 دلار
04 بتی جانسون مهندس برنامه های کاربردی 24 نوامبر 2021 620 دلار
05 میمون کاری UX جدید را پیاده سازی کنید 25 نوامبر 2021 795 دلار 
 <!-- Table Nesting -->
<table class="table table-nowrap">
    <thead class="table-light">
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Job Title</th>
            <th scope="col">Date</th>
            <th scope="col">Payment</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Annette Black</td>
            <td>Industrial Designer</td>
            <td>10, Nov 2021</td>
            <td>$450</td>
        </tr>
        <tr>
            <td colspan="5">
                <table class="table table-nowrap mb-0">
                    <thead class="table-light">
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Student</th>
                            <th scope="col">Course</th>
                            <th scope="col">Author</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Milana Scot</td>
                            <td>3d Animation</td>
                            <td>James Black</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Juston Eichmann</td>
                            <td>Design syntax</td>
                            <td>Olimpia Jordan</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Bessie Cooper</td>
            <td>Graphic Designer</td>
            <td>13, Nov 2021</td>
            <td>$875</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Leslie Alexander</td>
            <td>Product Manager</td>
            <td>16, Nov 2021</td>
            <td>$410</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Bettie Johson</td>
            <td>Applications Engineer</td>
            <td>24, Nov 2021</td>
            <td>$620</td>
        </tr>
        <tr>
            <th scope="row">5</th>
            <td>Monkey Karry</td>
            <td>Implement new UX</td>
            <td>25, Nov 2021</td>
            <td>$795</td>
        </tr>
    </tbody>
</table>

انواع

استفاده کنید table- کلاس با کلاس تنوع رنگ زیر در برای تنظیم رنگ در ردیف جدول.

# نام موقعیت بخش
پیش فرض میمون کاری متخصص پزشکی ارتوپدی
اولیه جیمز وایت دستیار پزشکی عمل جراحی
ثانویه آرون جیمز متخصص پزشکی مغز و اعصاب
موفقیت بتی جانسون متخصص پزشکی قلب و عروق
خطر بسی کوپر دستیار پزشکی عمل جراحی
هشدار لنورا سندووال دستیار پزشکی قلب و عروق
اطلاعات اریک پیرس متخصص پزشکی مغز و اعصاب
نور روث زیمرمن متخصص پزشکی مغز و اعصاب
تاریک لزلی الکساندر دستیار پزشکی قلب و عروق 
 <!-- Variants -->
<table class="table table-nowrap">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Position</th>
            <th scope="col">Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Default</td>
            <td>Monkey Karry</td>
            <td>Medical Specialist</td>
            <td>Orthopedics</td>
        </tr>
        <tr class="table-primary">
            <td>Primary</td>
            <td>James White</td>
            <td>Medical Assistant</td>
            <td>Surgery</td>
        </tr>
        <tr class="table-secondary">
            <td>Secondary</td>
            <td>Aaron James</td>
            <td>Medical Specialist</td>
            <td>Neurology</td>
        </tr>
        <tr class="table-success">
            <td>Success</td>
            <td>Bettie Johson</td>
            <td>Medical Specialist</td>
            <td>Cardiology</td>
        </tr>
        <tr class="table-danger">
            <td>Danger</td>
            <td>Bessie Cooper</td>
            <td>Medical Assistant</td>
            <td>Surgery</td>
        </tr>
        <tr class="table-warning">
            <td>Warning</td>
            <td>Lenora Sandoval</td>
            <td>Medical Assistant</td>
            <td>Cardiology</td>
        </tr>
        <tr class="table-info">
            <td>Info</td>
            <td>Eric Pierce</td>
            <td>Medical Specialist</td>
            <td>Neurology</td>
        </tr>
        <tr class="table-light">
            <td>Light</td>
            <td>Ruth Zimmermann</td>
            <td>Medical Specialist</td>
            <td>Neurology</td>
        </tr>
        <tr class="table-dark">
            <td>Dark</td>
            <td>Leslie Alexander</td>
            <td>Medical Assistant</td>
            <td>Cardiology</td>
        </tr>
    </tbody>
</table>

تراز عمودی

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

سرفصل سرفصل سرفصل سرفصل
این سلول ارث می برد vertical-align: middle; از روی میز این سلول ارث می برد vertical-align: middle; از روی میز این سلول ارث می برد vertical-align: middle; از روی میز این در اینجا متنی است که در نظر گرفته شده تا فضای عمودی زیادی را اشغال کند تا نشان دهد که تراز عمودی در سلول های قبلی چگونه کار می کند. از کلاس های تراز عمودی برای تراز مجدد در صورت نیاز استفاده کنید. تراز خود را از و به طور پیش فرض با بالا تراز می کنند.
این سلول ارث می برد vertical-align: bottom; از ردیف جدول این سلول ارث می برد vertical-align: bottom; از ردیف جدول این سلول ارث می برد vertical-align: bottom; از ردیف جدول این در اینجا متنی است که در نظر گرفته شده تا فضای عمودی زیادی را اشغال کند تا نشان دهد که تراز عمودی در سلول های قبلی چگونه کار می کند. از کلاس های تراز عمودی برای تراز مجدد در صورت نیاز استفاده کنید. تراز خود را از و به طور پیش فرض با بالا تراز می کنند.
این سلول ارث می برد vertical-align: middle; از روی میز این سلول ارث می برد vertical-align: middle; از روی میز این سلول به سمت بالا تراز شده است. این در اینجا متنی است که در نظر گرفته شده تا فضای عمودی زیادی را اشغال کند تا نشان دهد که تراز عمودی در سلول های قبلی چگونه کار می کند. از کلاس های تراز عمودی برای تراز مجدد در صورت نیاز استفاده کنید. تراز خود را از و به طور پیش فرض با بالا تراز می کنند. 
 <!-- Vertical alignment -->
<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>

جداول پاسخگو

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

 شناسه تاریخ وضعیت مشتری خریداری شده است درآمد
#VZ2110 10 اکتبر، 14:47 پرداخت شده است
جردن کندی
 تسلط بر شبکه 9.98 دلار
#VZ2109 17 اکتبر، 02:10 پرداخت شده است
جکسون گراهام
 Splashify 270.60 دلار
#VZ2108 26 اکتبر 08:20 بازپرداخت شد
لورن تروخیلو
 کیت Wireframing برای Figma 145.42 دلار
#VZ2107 02 نوامبر, 04:52 لغو کنید
کرتیس ویور
 کیت Wireframing برای Figma 170.68 دلار
#VZ2106 10 نوامبر, 07:20 پرداخت شده است
جیسون شولر
 Splashify 350.87 دلار
مجموع 947.55 دلار 
 <div class="table-responsive">
    <table class="table align-middle mb-0">
        <thead class="table-light">
            <tr>
                <th scope="col">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="responsivetableCheck">
                        <label class="form-check-label" for="responsivetableCheck"></label>
                    </div>
                </th>
                <th scope="col">#</th>
                <th scope="col">Date</th>
                <th scope="col">Status</th>
                <th scope="col">Customer</th>
                <th scope="col">Purchased</th>
                <th scope="col">Revenue</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="responsivetableCheck01">
                        <label class="form-check-label" for="responsivetableCheck01"></label>
                    </div>
                </th>
                <td><a href="#" class="fw-semibold">#VZ2110</a></td>
                <td>10 Oct, 14:47</td>
                <td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
                <td>
                    <div class="d-flex gap-2 align-items-center">
                        <div class="flex-shrink-0">
                            <img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-xs rounded-circle" />
                        </div>
                        <div class="flex-grow-1">
                            Jordan Kennedy
                        </div>
                    </div>
                </td>
                <td>Mastering the grid</td>
                <td>$9.98</td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="responsivetableCheck02">
                        <label class="form-check-label" for="responsivetableCheck02"></label>
                    </div>
                </th>
                <td><a href="#" class="fw-semibold">#VZ2109</a></td>
                <td>17 Oct, 02:10</td>
                <td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
                <td>
                    <div class="d-flex gap-2 align-items-center">
                        <div class="flex-shrink-0">
                            <img src="assets/images/users/avatar-4.jpg" alt="" class="avatar-xs rounded-circle" />
                        </div>
                        <div class="flex-grow-1">
                            Jackson Graham
                        </div>
                    </div>
                </td>
                <td>Splashify</td>
                <td>$270.60</td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="responsivetableCheck03">
                        <label class="form-check-label" for="responsivetableCheck03"></label>
                    </div>
                </th>
                <td><a href="#" class="fw-semibold">#VZ2108</a></td>
                <td>26 Oct, 08:20</td>
                <td class="text-primary"><i class="ri-refresh-line fs-17 align-middle"></i> Refunded</td>
                <td>
                    <div class="d-flex gap-2 align-items-center">
                        <div class="flex-shrink-0">
                            <img src="assets/images/users/avatar-5.jpg" alt="" class="avatar-xs rounded-circle" />
                        </div>
                        <div class="flex-grow-1">
                            Lauren Trujillo
                        </div>
                    </div>
                </td>
                <td>Wireframing Kit for Figma</td>
                <td>$145.42</td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="responsivetableCheck04">
                        <label class="form-check-label" for="responsivetableCheck04"></label>
                    </div>
                </th>
                <td><a href="#" class="fw-semibold">#VZ2107</a></td>
                <td>02 Nov, 04:52</td>
                <td class="text-danger"><i class="ri-close-circle-line fs-17 align-middle"></i> Cancel</td>
                <td>
                    <div class="d-flex gap-2 align-items-center">
                        <div class="flex-shrink-0">
                            <img src="assets/images/users/avatar-6.jpg" alt="" class="avatar-xs rounded-circle" />
                        </div>
                        <div class="flex-grow-1">
                            Curtis Weaver
                        </div>
                    </div>
                </td>
                <td>Wireframing Kit for Figma</td>
                <td>$170.68</td>
            </tr>
            <tr>
                <th scope="row">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="responsivetableCheck05">
                        <label class="form-check-label" for="responsivetableCheck05"></label>
                    </div>
                </th>
                <td><a href="#" class="fw-semibold">#VZ2106</a></td>
                <td>10 Nov, 07:20</td>
                <td class="text-success"><i class="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
                <td>
                    <div class="d-flex gap-2 align-items-center">
                        <div class="flex-shrink-0">
                            <img src="assets/images/users/avatar-1.jpg" alt="" class="avatar-xs rounded-circle" />
                        </div>
                        <div class="flex-grow-1">
                            Jason schuller
                        </div>
                    </div>
                </td>
                <td>Splashify</td>
                <td>$350.87</td>
            </tr>
        </tbody>
        <tfoot class="table-light">
            <tr>
                <td colspan="6">Total</td>
                <td>$947.55</td>
            </tr>
        </tfoot>
    </table>
    <!-- end table -->
</div>
<!-- end table responsive -->
© Velzon.
طراحی و توسعه توسط مرداد