جدول های نمونه

نام تاریخ فروش وضیعت
حمید لولایی 1399/8/12 320 کامل
دانیال مرادی 1399/8/11 420 در انتظار
احمد رضایی 1399/8/13 130 در حال انجام
مهدی رسوایی 1399/8/14 260 لغو شده
<div class="table-responsive">
    <table class="table table-bordered mb-4">
        <thead>
            <tr>
                <th>Name</th>
                <th>Date</th>
                <th>Sale</th>
                <th class="text-center">Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>حمید لولایی</td>
                <td>1399/8/12</td>
                <td>320</td>
                <td class="text-center"><span class="text-success">Complete</span></td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
            <tr>
                <td>دانیال مرادی</td>
                <td>1399/8/11</td>
                <td>420</td>
                <td class="text-center"><span class="text-secondary">Pending</span></td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
            <tr>
                <td>احمد رضایی</td>
                <td>1399/8/13</td>
                <td>130</td>
                <td class="text-center"><span class="text-info">In progress</span></td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
            <tr>
                <td>Vincent Carpenter</td>
                <td>1399/8/14</td>
                <td>260</td>
                <td class="text-center"><span class="text-danger">Canceled</span></td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
        </tbody>
    </table>
</div>
    

جدول تحریک پذیر

نام تاریخ فروش وضیعت
حمید لولایی 1399/8/12 320 کامل
دانیال مرادی 1399/8/11 420 در انتظار
احمد رضایی 1399/8/13 130 در حال انجام
مهدی رسوایی 1399/8/14 260 لغو شده
<div class="table-responsive">
    <table class="table table-bordered table-hover table-striped mb-4">
        <thead>
            <tr>
                <th>Name</th>
                <th>Date</th>
                <th>Sale</th>
                <th class="text-center">Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>حمید لولایی</td>
                <td>1399/8/12</td>
                <td>320</td>
                <td class="text-center"><span class="text-success">Complete</span></td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
            <tr>
                <td> دانیال مرادی</td>
                <td>1399/8/11</td>
                <td>420</td>
                <td class="text-center"><span class="text-secondary">Pending</span></td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
            <tr>
                <td>احمد رضایی</td>
                <td>1399/8/13</td>
                <td>130</td>
                <td class="text-center"><span class="text-info">In progress</span></td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
            <tr>
                <td>Vincent Carpenter</td>
                <td>1399/8/14</td>
                <td>260</td>
                <td class="text-center"><span class="text-danger">Canceled</span></td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
        </tbody>
    </table>
</div>
    

جدول راه راه

نام تاریخ فروش عمل
avatar

حمید

1399/8/12 320
avatar

هما

1399/8/11 420
avatar

ایرج

1399/8/13 130
avatar

مجتبی

1399/8/14 260
<div class="table-responsive">
    <table class="table table-bordered table-striped mb-4">
        <thead>
            <tr>
                <th>Name</th>
                <th>Date</th>
                <th>Sale</th>
                <th class="text-center">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="d-flex">
                        <div class="usr-img-frame mr-2 rounded-circle">
                            <img alt="avatar" class="img-fluid rounded-circle" src="assets/img/90x90.jpg">
                        </div>
                        <p class="align-self-center mb-0">حمید</p>
                    </div>
                </td>
                <td>1399/8/12</td>
                <td>320</td>
                <td class=" text-center"><svg> ... </svg></td>
            </tr>
            <tr>
                <td>
                    <div class="d-flex">
                        <div class="usr-img-frame mr-2 rounded-circle">
                            <img alt="avatar" class="img-fluid rounded-circle" src="assets/img/90x90.jpg">
                        </div>
                        <p  class="align-self-center mb-0">Alma</p>
                    </div>
                </td>
                <td>1399/8/11</td>
                <td>420</td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
            <tr>
                <td>
                    <div class="d-flex">
                        <div class="usr-img-frame mr-2 rounded-circle">
                            <img alt="avatar" class="img-fluid rounded-circle" src="assets/img/90x90.jpg">
                        </div>
                        <p  class="align-self-center mb-0">Kelly</p>
                    </div>
                </td>
                <td>1399/8/13</td>
                <td>130</td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
            <tr>
                <td>
                    <div class="d-flex">
                        <div class="usr-img-frame mr-2 rounded-circle">
                            <img alt="avatar" class="img-fluid rounded-circle" src="assets/img/90x90.jpg">
                        </div>
                        <p  class="align-self-center mb-0">Vincent</p>
                    </div>
                </td>
                <td>1399/8/14</td>
                <td>260</td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
        </tbody>
    </table>
</div>
    

جدول لایت

# نام کوچک نام فامیلی ایمیل
1 رضا امیری johndoe@yahoo.com
2 ایمان پاکروح andyking@gmail.com
3 سیناح امیری lisadoe@live.com
4 مجتبی پر< vinnyc@outlook.com
<div class="table-responsive">
    <table class="table table-hover table-dark mb-4">
        <thead>
            <tr>
                <th class="text-center">#</th>
                <th>نام کوچک</th>
                <th>نام فامیلی</th>
                <th>Email</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-center">1</td>
                <td>رضا</td>
                <td>Doe</td>
                <td>johndoe@yahoo.com</td>
                <td class=" text-center"><svg> ... </svg></td>
            </tr>
            <tr>
                <td class="text-center">2</td>
                <td>Andy</td>
                <td>King</td>
                <td>andyking@gmail.com</td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
            <tr>
                <td class="text-center">3</td>
                <td>Lisa</td>
                <td>Doe</td>
                <td>lisadoe@live.com</td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
            <tr>
                <td class="text-center">4</td>
                <td>Vincent</td>
                <td>Carpenter</td>
                <td>vinnyc@outlook.com</td>
                <td class="text-center"><svg> ... </svg></td>
            </tr>
        </tbody>
    </table>
</div>
    

زیرنویس ها

List of all users
# نام ایمیل وضیعت ثبت نام
1 حمید لولایی johndoe@yahoo.com کامل 5 دقیقه قبل
2 مهناز ریاضی andyking@gmail.com در انتظار 10 دقیقه قبل
3 معصومه حسینی lisadoe@live.com در حال پیش رفت 1 hour ago
4 مهدی رسوایی vinnyc@outlook.com لغو 1 day ago
<div class="table-responsive">
    <table class="table mb-4">
      <caption>List of all users</caption>
      <thead>
            <tr>
                <th class="text-center">#</th>
                <th>Name</th>
                <th>Email</th>
                <th class="">Status</th>
                <th>Register</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-center">1</td>
                <td class="text-primary">حمید لولایی</td>
                <td>johndoe@yahoo.com</td>
                <td class=""><span class=" shadow-none badge outline-badge-primary">Complete</span></td>
                <td>5 دقیقه قبل</td>
            </tr>
            <tr>
                <td class="text-center">2</td>
                <td class="text-primary">مهناز ریاضی</td>
                <td>andyking@gmail.com</td>
                <td class=""><span class="badge outline-badge-secondary shadow-none">Pending</span></td>
                <td>10 دقیقه قبل</td>
            </tr>
            <tr>
                <td class="text-center">3</td>
                <td class="text-primary">معصومه حسینی</td>
                <td>lisadoe@live.com</td>
                <td class=""><span class="badge outline-badge-info shadow-none">در حال پیش رفت</span></td>
                <td>1 hour ago</td>
            </tr>
            <tr>
                <td class="text-center">4</td>
                <td class="text-primary">Vincent Carpenter</td>
                <td>vinnyc@outlook.com</td>
                <td class=""><span class="badge outline-badge-danger shadow-none">Cancel</span></td>
                <td>1 day ago</td>
            </tr>
        </tbody>
    </table>
</div>
    

جدول پیشرفت

# نام پیشرفت فروش ها عمل
1 مهدی حسینی

29.56%

2 مهناز ریاضی

19.15%

3 علی

39.00%

4 مهدی رسوایی

88.03%

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th class="text-center">#</th>
                <th>Name</th>
                <th>Progress</th>
                <th>Sales</th>
                <th class="text-center">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-center">1</td>
                <td>مهدی حسینی</td>
                <td>                                                    
                    <div class="progress br-30">
                        <div class="progress-bar br-30 bg-primary" role="progressbar" style="width: 29.56%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </td>
                <td><p class="text-danger">29.56%</p></td>
                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="text-center">2</td>
                <td>مهناز ریاضی</td>
                <td>                                                    
                    <div class="progress br-30">
                        <div class="progress-bar br-30 bg-warning" role="progressbar" style="width: 19.15%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </td>
                <td><p class="text-danger">19.15%</p></td>
                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="text-center">3</td>
                <td>علی</td>
                <td>                                                    
                    <div class="progress br-30">
                        <div class="progress-bar br-30 bg-success" role="progressbar" style="width: 39.00%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </td>
                <td><p class="text-danger">39.00%</p></td>
                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="text-center">4</td>
                <td>Vincent Carpenter</td>
                <td>                                                    
                    <div class="progress br-30">
                        <div class="progress-bar br-30 bg-secondary" role="progressbar" style="width: 88.03%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </td>
                <td><p class="text-success">88.03%</p></td>
                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</div>
    

متن

# نام کوچک نام فامیلی ایمیل
1 رضا امیری johndoe@yahoo.com
2 ایمان پاکروح andyking@gmail.com
3 سیناح امیری lisadoe@live.com
4 مجتبی پر< vinnyc@outlook.com
5 سینا دیرباز amydiaz@gmail.com
6 محسن فدایی niahill@gmail.com
7 اشکان محسنی marryMcD@gmail.com
8 حمید تارتاری spark@adobe.com
<div class="table-responsive">
    <table class="table mb-4 contextual-table">
        <thead>
            <tr class="">
                <th class="text-center">#</th>
                <th>نام کوچک</th>
                <th>نام فامیلی</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-default">
                <td class="text-center">1</td>
                <td>رضا</td>
                <td>Doe</td>
                <td>johndoe@yahoo.com</td>
            </tr>
            <tr class="table-primary">
                <td class="text-center">2</td>
                <td>Andy</td>
                <td>King</td>
                <td>andyking@gmail.com</td>
            </tr>
            <tr class="table-secondary">
                <td class="text-center">3</td>
                <td>Lisa</td>
                <td>Doe</td>
                <td>lisadoe@live.com</td>
            </tr>
            <tr class="table-success">
                <td class="text-center">4</td>
                <td>Vincent</td>
                <td>Carpenter</td>
                <td>vinnyc@outlook.com</td>
            </tr>
            <tr class="table-warning">
                <td class="text-center">5</td>
                <td>حمید</td>
                <td>Park</td>
                <td>spark@adobe.com</td>
            </tr>
            <tr class="table-danger">
                <td class="text-center">6</td>
                <td>Nia</td>
                <td>Hillyer</td>
                <td>niahill@gmail.com</td>
            </tr>

            <tr class="table-info">
                <td class="text-center">7</td>
                <td>Marry</td>
                <td>McDonald</td>
                <td>marryMcD@gmail.com</td>
            </tr>
            <tr class="table-dark">
                <td class="text-center">8</td>
                <td>Amy</td>
                <td>Diaz</td>
                <td>amydiaz@gmail.com</td>
            </tr>
        </tbody>
    </table>
</div>
    

کشویی

نام تاریخ فروش وضیعت عمل
حمید 1399/8/12 320 تایید شده
هما 1399/8/11 420 در حال پیش رفت
ایرج 1399/8/13 130 معلق
احمد رضایی 1399/8/14 260 مسدود شده
ایمان پاکروح 14/08/1399 99 در مرخصی
خسرو 15/08/1399 555 در انتظار
سینا 16/08/1399 300 حذف شده
<div class="table-responsive">
    <table class="table table-bordered mb-4">
        <thead>
            <tr>
                <th>Name</th>
                <th>Date</th>
                <th>Sale</th>
                <th class="text-center">Status</th>
                <th class="text-center">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>حمید</td>
                <td>1399/8/12</td>
                <td>320</td>
                <td class="text-center"><span class="badge badge-success">تایید شده</span></td>
                <td class="text-center">
                    
                    <div class="dropdown custom-dropdown">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <svg> ... </svg>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
                            <a class="dropdown-item" href="javascript:void(0);">Download</a>
                            <a class="dropdown-item" href="javascript:void(0);">Share</a>
                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                        </div>
                    </div>

                </td>
            </tr>
            <tr>
                <td>Alma</td>
                <td>1399/8/11</td>
                <td>420</td>
                <td class="text-center"><span class="badge badge-primary">در حال پیش رفت</span></td>
                <td class="text-center">
                    
                    <div class="dropdown custom-dropdown">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <svg> ... </svg>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
                            <a class="dropdown-item" href="javascript:void(0);">Download</a>
                            <a class="dropdown-item" href="javascript:void(0);">Share</a>
                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Kelly</td>
                <td>1399/8/13</td>
                <td>130</td>
                <td class="text-center"><span class="badge badge-warning">Suspended</span></td>
                <td class="text-center">
                    
                    <div class="dropdown custom-dropdown">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <svg> ... </svg>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink3">
                            <a class="dropdown-item" href="javascript:void(0);">Download</a>
                            <a class="dropdown-item" href="javascript:void(0);">Share</a>
                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>احمد رضایی</td>
                <td>1399/8/14</td>
                <td>260</td>
                <td class="text-center"><span class="badge badge-danger">Blocked</span></td>
                <td class="text-center">
                    
                    <div class="dropdown custom-dropdown">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <svg> ... </svg>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink4">
                            <a class="dropdown-item" href="javascript:void(0);">Download</a>
                            <a class="dropdown-item" href="javascript:void(0);">Share</a>
                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Andy</td>
                <td>14/08/2019</td>
                <td>99</td>
                <td class="text-center"><span class="badge badge-secondary">On leave</span></td>
                <td class="text-center">                                                    
                    <div class="dropdown custom-dropdown">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <svg> ... </svg>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                            <a class="dropdown-item" href="javascript:void(0);">Download</a>
                            <a class="dropdown-item" href="javascript:void(0);">Share</a>
                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Justin</td>
                <td>15/08/2019</td>
                <td>555</td>
                <td class="text-center"><span class="badge badge-info">Pending</span></td>
                <td class="text-center">                                                    
                    <div class="dropdown custom-dropdown">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <svg> ... </svg>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink6">
                            <a class="dropdown-item" href="javascript:void(0);">Download</a>
                            <a class="dropdown-item" href="javascript:void(0);">Share</a>
                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Amy</td>
                <td>16/08/2019</td>
                <td>300</td>
                <td class="text-center"><span class="badge badge-dark">Deleted</span></td>
                <td class="text-center">
                    
                    <div class="dropdown custom-dropdown">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <svg> ... </svg>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink7">
                            <a class="dropdown-item" href="javascript:void(0);">Download</a>
                            <a class="dropdown-item" href="javascript:void(0);">Share</a>
                            <a class="dropdown-item" href="javascript:void(0);">Edit</a>
                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
    

جدول با پاورقی

نام موقعیت دفتر عمل
احمد رضایی توسعه دهنده لندن
مهناز ریاضی طراح نیویورک
معصومه حسینی حسابدار آمازون
مهدی رسوایی دانشمند داده کانادا
نام موقعیت دفتر عمل
<div class="table-responsive">
    <table class="table table-bordered table-hover table-condensed mb-4">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th class="text-center">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>احمد رضایی</td>
                <td>Developer</td>
                <td>London</td>
                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>مهناز ریاضی</td>
                <td>Designer</td>
                <td>New York</td>
                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>معصومه حسینی</td>
                <td>Accountant</td>
                <td>Amazon</td>
                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>Vincent Carpenter</td>
                <td>Data Scientist</td>
                <td>Canada</td>
                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);"  data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th class="text-center">Action</th>
            </tr>
        </tfoot>
    </table>
</div>
    

چک باکس ها

نام تاریخ فروش ها آیکون ها

حمید لولایی

1399/8/12 320

دانیال مرادی

1399/8/11 420

راضیه

1399/8/13 130

مهدی رسوایی

1399/8/14 260

مهناز ریاضی

14/08/1399 180
<div class="table-responsive">
    <table class="table table-bordered table-hover table-striped table-checkable table-highlight-head mb-4">
        <thead>
            <tr>
                <th class="checkbox-column">
                    <div class="custom-control custom-checkbox checkbox-primary">
                      <input type="checkbox" class="custom-control-input todochkbox" id="todoAll">
                      <label class="custom-control-label" for="todoAll"></label>
                    </div>
                </th>
                <th class="">Name</th>
                <th class="">Date</th>
                <th class="">Sales</th>
                <th class="text-center">Icons</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="checkbox-column">
                    <div class="custom-control custom-checkbox checkbox-primary">
                      <input type="checkbox" class="custom-control-input todochkbox" id="todo-1">
                      <label class="custom-control-label" for="todo-1"></label>
                    </div>
                </td>
                <td>
                    <p class="mb-0">حمید لولایی</p>
                </td>
                <td>1399/8/12</td>
                <td>320</td>

                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="تنظیمات"><svg> ... </svg></a> </li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="checkbox-column">
                    <div class="custom-control custom-checkbox checkbox-primary">
                      <input type="checkbox" class="custom-control-input todochkbox" id="todo-2">
                      <label class="custom-control-label" for="todo-2"></label>
                    </div>
                </td>
                <td>
                    <p  class="mb-0">دانیال مرادی</p>
                </td>
                <td>1399/8/11</td>
                <td>420</td>
                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="تنظیمات"><svg> ... </svg></a> </li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="checkbox-column">
                    <div class="custom-control custom-checkbox checkbox-primary">
                      <input type="checkbox" class="custom-control-input todochkbox" id="todo-3">
                      <label class="custom-control-label" for="todo-3"></label>
                    </div>
                </td>
                <td>
                    <p class="mb-0">راضیه</p>
                </td>
                <td>1399/8/13</td>
                <td>130</td>
                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="تنظیمات"><svg> ... </svg></a> </li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="checkbox-column">
                    <div class="custom-control custom-checkbox checkbox-primary">
                      <input type="checkbox" class="custom-control-input todochkbox" id="todo-4">
                      <label class="custom-control-label" for="todo-4"></label>
                    </div>
                </td>
                <td>
                    <p  class="mb-0">Vincent Carpenter</p>
                </td>
                <td>1399/8/14</td>
                <td>260</td>
                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="تنظیمات"><svg> ... </svg></a> </li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td class="checkbox-column">
                    <div class="custom-control custom-checkbox checkbox-primary">
                      <input type="checkbox" class="custom-control-input todochkbox" id="todo-5">
                      <label class="custom-control-label" for="todo-5"></label>
                    </div>
                </td>
                <td>
                    <p  class="mb-0">مهناز ریاضی</p>
                </td>
                <td>14/08/2019</td>
                <td>180</td>
                <td class="text-center">
                    <ul class="table-controls">
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="تنظیمات"><svg> ... </svg></a> </li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="ویرایش"><svg> ... </svg></a></li>
                        <li><a href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="حذف"><svg> ... </svg></a></li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</div>