جداول

مستندات و نمونه هایی برای استایل انتخابی جداول با فالکون.

جداول در بوت استرپ
جدول پایه

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

نام پست الکترونیک اقدامات
ریکی آنتونی ricky@example.com
اما واتسون emma@example.com
روون اتکینسون rown@example.com
آنتونی هاپکینز antony@example.com
جنیفر شرام jennifer@example.com 
<div class="table-responsive scrollbar">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th class="text-end" scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ricky Antony</td>
        <td>ricky@example.com</td>
        <td class="text-end">
          <div><button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Emma Watson</td>
        <td>emma@example.com</td>
        <td class="text-end">
          <div><button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Rowen Atkinson</td>
        <td>rown@example.com</td>
        <td class="text-end">
          <div><button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Antony Hopkins</td>
        <td>antony@example.com</td>
        <td class="text-end">
          <div><button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Jennifer Schramm</td>
        <td>jennifer@example.com</td>
        <td class="text-end">
          <div><button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
راه راه

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

نام پست الکترونیک اقدامات
ریکی آنتونی ricky@example.com
ویرایش کنیدحذف
اما واتسون emma@example.com
ویرایش کنیدحذف
روون اتکینسون rown@example.com
ویرایش کنیدحذف
آنتونی هاپکینز antony@example.com
ویرایش کنیدحذف
جنیفر شرام jennifer@example.com
ویرایش کنیدحذف
 
<div class="table-responsive scrollbar">
  <table class="table table-striped overflow-hidden">
    <thead>
      <tr class="btn-reveal-trigger">
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th class="text-end" scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr class="btn-reveal-trigger">
        <td>Ricky Antony</td>
        <td>ricky@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Emma Watson</td>
        <td>emma@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Rowen Atkinson</td>
        <td>rown@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Antony Hopkins</td>
        <td>antony@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Jennifer Schramm</td>
        <td>jennifer@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
تاریک

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

نام پست الکترونیک
ریکی آنتونی ricky@example.com
اما واتسون emma@example.com
روون اتکینسون rown@example.com
آنتونی هاپکینز antony@example.com
جنیفر شرام jennifer@example.com 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ricky Antony</td>
      <td>ricky@example.com</td>
    </tr>
    <tr>
      <td>Emma Watson</td>
      <td>emma@example.com</td>
    </tr>
    <tr>
      <td>Rowen Atkinson</td>
      <td>rown@example.com</td>
    </tr>
    <tr>
      <td>Antony Hopkins</td>
      <td>antony@example.com</td>
    </tr>
    <tr>
      <td>Jennifer Schramm</td>
      <td>jennifer@example.com</td>
    </tr>
  </tbody>
</table>
ردیف های قابل شناور
نام پست الکترونیک ملحق شد
ریکی آنتونی
 ricky@example.com
1390/03/02
اما واتسون
 emma@example.com
1396/11/07
RA
روون اتکینسون
 rown@example.com
1395/04/01
آنتونی هاپکینز
 antony@example.com
1375/04/02
جنیفر شرام
 jennifer@example.com
1395/03/17 
<div class="table-responsive scrollbar">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col"> </th>
        <th scope="col">joined</th>
      </tr>
    </thead>
    <tbody>
      <tr class="hover-actions-trigger">
        <td class="align-middle text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/4.jpg" alt="" />
            </div>
            <div class="ms-2">Ricky Antony</div>
          </div>
        </td>
        <td class="align-middle text-nowrap">ricky@example.com</td>
        <td class="w-auto">
          <div class="btn-group btn-group hover-actions end-0 me-4"><button class="btn btn-light pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button><button class="btn btn-light ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button></div>
        </td>
        <td class="align-middle text-nowrap">30/03/2018</td>
      </tr>
      <tr class="hover-actions-trigger">
        <td class="align-middle text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/13.jpg" alt="" />
            </div>
            <div class="ms-2">Emma Watson</div>
          </div>
        </td>
        <td class="align-middle text-nowrap">emma@example.com</td>
        <td class="w-auto">
          <div class="btn-group btn-group hover-actions end-0 me-4"><button class="btn btn-light pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button><button class="btn btn-light ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button></div>
        </td>
        <td class="align-middle text-nowrap">11/07/2017</td>
      </tr>
      <tr class="hover-actions-trigger">
        <td class="align-middle text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <div class="avatar-name rounded-circle"><span>RA</span></div>
            </div>
            <div class="ms-2">Rowen Atkinson</div>
          </div>
        </td>
        <td class="align-middle text-nowrap">rown@example.com</td>
        <td class="w-auto">
          <div class="btn-group btn-group hover-actions end-0 me-4"><button class="btn btn-light pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button><button class="btn btn-light ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button></div>
        </td>
        <td class="align-middle text-nowrap">05/04/2016</td>
      </tr>
      <tr class="hover-actions-trigger">
        <td class="align-middle text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/2.jpg" alt="" />
            </div>
            <div class="ms-2">Antony Hopkins</div>
          </div>
        </td>
        <td class="align-middle text-nowrap">antony@example.com</td>
        <td class="w-auto">
          <div class="btn-group btn-group hover-actions end-0 me-4"><button class="btn btn-light pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button><button class="btn btn-light ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button></div>
        </td>
        <td class="align-middle text-nowrap">05/04/2018</td>
      </tr>
      <tr class="hover-actions-trigger">
        <td class="align-middle text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/3.jpg" alt="" />
            </div>
            <div class="ms-2">Jennifer Schramm</div>
          </div>
        </td>
        <td class="align-middle text-nowrap">jennifer@example.com</td>
        <td class="w-auto">
          <div class="btn-group btn-group hover-actions end-0 me-4"><button class="btn btn-light pe-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="fas fa-edit"></span></button><button class="btn btn-light ps-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="fas fa-trash-alt"></span></button></div>
        </td>
        <td class="align-middle text-nowrap">17/03/2016</td>
      </tr>
    </tbody>
  </table>
</div>
جداول حاشیه دار

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

نام پست الکترونیک
ریکی آنتونی ricky@example.com
اما واتسون emma@example.com
روون اتکینسون rown@example.com
آنتونی هاپکینز antony@example.com
جنیفر شرام jennifer@example.com 
<table class="table table-bordered">
  <thead class="table-dark">
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ricky Antony</td>
      <td>ricky@example.com</td>
    </tr>
    <tr>
      <td>Emma Watson</td>
      <td>emma@example.com</td>
    </tr>
    <tr>
      <td>Rowen Atkinson</td>
      <td>rown@example.com</td>
    </tr>
    <tr>
      <td>Antony Hopkins</td>
      <td>antony@example.com</td>
    </tr>
    <tr>
      <td>Jennifer Schramm</td>
      <td>jennifer@example.com</td>
    </tr>
  </tbody>
</table>
زیرنویس ها
لیست کاربران
نام پست الکترونیک
ریکی آنتونی ricky@example.com
اما واتسون emma@example.com
روون اتکینسون rown@example.com
آنتونی هاپکینز antony@example.com
جنیفر شرام jennifer@example.com 
<table class="table">
  <caption>List of Users</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ricky Antony</td>
      <td>ricky@example.com</td>
    </tr>
    <tr>
      <td>Emma Watson</td>
      <td>emma@example.com</td>
    </tr>
    <tr>
      <td>Rowen Atkinson</td>
      <td>rown@example.com</td>
    </tr>
    <tr>
      <td>Antony Hopkins</td>
      <td>antony@example.com</td>
    </tr>
    <tr>
      <td>Jennifer Schramm</td>
      <td>jennifer@example.com</td>
    </tr>
  </tbody>
</table>
میزهای کوچک

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

نام پست الکترونیک
ریکی آنتونی ricky@example.com
اما واتسون emma@example.com
روون اتکینسون rown@example.com
آنتونی هاپکینز antony@example.com
جنیفر شرام jennifer@example.com
میزان رفعت mizan@example.com
تونی رابینز tony@example.com 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ricky Antony</td>
      <td>ricky@example.com</td>
    </tr>
    <tr>
      <td>Emma Watson</td>
      <td>emma@example.com</td>
    </tr>
    <tr>
      <td>Rowen Atkinson</td>
      <td>rown@example.com</td>
    </tr>
    <tr>
      <td>Antony Hopkins</td>
      <td>antony@example.com</td>
    </tr>
    <tr>
      <td>Jennifer Schramm</td>
      <td>jennifer@example.com</td>
    </tr>
    <tr>
      <td>Mizan Rifat</td>
      <td>mizan@example.com</td>
    </tr>
    <tr>
      <td>Tony Robbins</td>
      <td>tony@example.com</td>
    </tr>
  </tbody>
</table>
برجسته کردن ستون
نام پست الکترونیک اقدامات
ریکی آنتونی ricky@example.com
ویرایش کنیدحذف
اما واتسون emma@example.com
ویرایش کنیدحذف
روون اتکینسون rown@example.com
ویرایش کنیدحذف
آنتونی هاپکینز antony@example.com
ویرایش کنیدحذف
جنیفر شرام jennifer@example.com
ویرایش کنیدحذف
 
<div class="table-responsive scrollbar">
  <table class="table table-bordered overflow-hidden">
    <colgroup>
      <col class="bg-soft-primary" />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr class="btn-reveal-trigger">
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th class="text-end" scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr class="btn-reveal-trigger">
        <td>Ricky Antony</td>
        <td>ricky@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Emma Watson</td>
        <td>emma@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Rowen Atkinson</td>
        <td>rown@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Antony Hopkins</td>
        <td>antony@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="btn-reveal-trigger">
        <td>Jennifer Schramm</td>
        <td>jennifer@example.com</td>
        <td class="text-end">
          <div class="dropdown font-sans-serif position-static"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
            <div class="dropdown-menu dropdown-menu-end border py-0">
              <div class="bg-white py-2"><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item text-danger" href="#!">Delete</a></div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
جدول فعال

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

نام پست الکترونیک اقدامات
ریکی آنتونی ricky@example.com
اما واتسون emma@example.com
روون اتکینسون rown@example.com
آنتونی هاپکینز antony@example.com
جنیفر شرام jennifer@example.com 
<div class="table-responsive scrollbar">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th class="text-end" scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ricky Antony</td>
        <td>ricky@example.com</td>
        <td class="text-end">
          <div><button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr class="table-active">
        <td>Emma Watson</td>
        <td>emma@example.com</td>
        <td class="text-end">
          <div><button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Rowen Atkinson</td>
        <td>rown@example.com</td>
        <td class="text-end">
          <div><button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Antony Hopkins</td>
        <td class="table-active">antony@example.com</td>
        <td class="text-end">
          <div><button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
      <tr>
        <td>Jennifer Schramm</td>
        <td>jennifer@example.com</td>
        <td class="text-end">
          <div><button class="btn p-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="text-500 fas fa-edit"></span></button><button class="btn p-0 ms-2" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="text-500 fas fa-trash-alt"></span></button></div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
انواع

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

نام پست الکترونیک
ریکی آنتونی ricky@example.com
اما واتسون emma@example.com
روون اتکینسون rown@example.com
آنتونی هاپکینز antony@example.com
جنیفر شرام jennifer@example.com 
<table class="table">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <td>Ricky Antony</td>
      <td>ricky@example.com</td>
    </tr>
    <tr class="table-secondary">
      <td>Emma Watson</td>
      <td>emma@example.com</td>
    </tr>
    <tr class="table-success">
      <td>Rowen Atkinson</td>
      <td>rown@example.com</td>
    </tr>
    <tr class="table-danger">
      <td>Antony Hopkins</td>
      <td>antony@example.com</td>
    </tr>
    <tr class="table-warning">
      <td>Jennifer Schramm</td>
      <td>jennifer@example.com</td>
    </tr>
  </tbody>
</table>
جدول پاسخگو

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

نام پست الکترونیک تلفن نشانی وضعیت میزان
ریکی آنتونی
 ricky@example.com 011-123456 خیابان اصلی 2392، پناسوکا تکمیل شد 99 تومان
اما واتسون
 emma@example.com 011-123456 2289 خیابان پنجم، نیویورک تکمیل شد 199 تومان
RA
روون اتکینسون
 rown@example.com 011-123456 112 Bostwick Avenue, Jersey City در حال پردازش 755 تومان
آنتونی هاپکینز
 antony@example.com 011-123456 3448 Ile De France خیابان #242 در انتظار 50 تومان
جنیفر شرام
 jennifer@example.com 011-123456 659 خیابان هانا، شارلوت در انتظار 150 تومان 
<div class="table-responsive scrollbar">
  <table class="table table-hover table-striped overflow-hidden">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Phone</th>
        <th scope="col">Address</th>
        <th scope="col">Status</th>
        <th class="text-end" scope="col">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr class="align-middle">
        <td class="text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/4.jpg" alt="" />
            </div>
            <div class="ms-2">Ricky Antony</div>
          </div>
        </td>
        <td class="text-nowrap">ricky@example.com</td>
        <td class="text-nowrap">(201) 200-1851</td>
        <td class="text-nowrap">2392 Main Avenue, Penasauka</td>
        <td><span class="badge badge rounded-pill d-block p-2 badge-soft-success">Completed<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
        <td class="text-end">$99</td>
      </tr>
      <tr class="align-middle">
        <td class="text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/13.jpg" alt="" />
            </div>
            <div class="ms-2">Emma Watson</div>
          </div>
        </td>
        <td class="text-nowrap">emma@example.com</td>
        <td class="text-nowrap">(212) 228-8403</td>
        <td class="text-nowrap">2289 5th Avenue, New York</td>
        <td><span class="badge badge rounded-pill d-block p-2 badge-soft-success">Completed<span class="ms-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
        <td class="text-end">$199</td>
      </tr>
      <tr class="align-middle">
        <td class="text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <div class="avatar-name rounded-circle"><span>RA</span></div>
            </div>
            <div class="ms-2">Rowen Atkinson</div>
          </div>
        </td>
        <td class="text-nowrap">rown@example.com</td>
        <td class="text-nowrap">(201) 200-1851</td>
        <td class="text-nowrap">112 Bostwick Avenue, Jersey City</td>
        <td><span class="badge badge rounded-pill d-block p-2 badge-soft-primary">Processing<span class="ms-1 fas fa-redo" data-fa-transform="shrink-2"></span></span></td>
        <td class="text-end">$755</td>
      </tr>
      <tr class="align-middle">
        <td class="text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/2.jpg" alt="" />
            </div>
            <div class="ms-2">Antony Hopkins</div>
          </div>
        </td>
        <td class="text-nowrap">antony@example.com</td>
        <td class="text-nowrap">(901) 324-3127</td>
        <td class="text-nowrap">3448 Ile De France St #242</td>
        <td><span class="badge badge rounded-pill d-block p-2 badge-soft-secondary">On Hold<span class="ms-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
        <td class="text-end">$50</td>
      </tr>
      <tr class="align-middle">
        <td class="text-nowrap">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-xl">
              <img class="rounded-circle" src="../../assets/img/team/3.jpg" alt="" />
            </div>
            <div class="ms-2">Jennifer Schramm</div>
          </div>
        </td>
        <td class="text-nowrap">jennifer@example.com</td>
        <td class="text-nowrap">(828) 382-9631</td>
        <td class="text-nowrap">659 Hannah Street, Charlotte</td>
        <td><span class="badge badge rounded-pill d-block p-2 badge-soft-warning">Pending<span class="ms-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
        <td class="text-end">$150</td>
      </tr>
    </tbody>
  </table>
</div>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.

RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما
چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال
موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید

سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی