#### Table Dark

##### Inverse Table

##### Inverse Table - View Code

    <div class="table-responsive" data-bs-theme="dark">
      <table class="table border text-nowrap table-dark mb-0 align-middle">
          <thead class="text-dark fs-4">
              <tr>
                  <th>
                      <h6 class="fs-4 fw-semibold text-white mb-0">User</h6>
                  </th>
                  <th>
                      <h6 class="fs-4 fw-semibold text-white mb-0">Project Name</h6>
                  </th>
                  <th>
                      <h6 class="fs-4 fw-semibold text-white mb-0">Team</h6>
                  </th>
                  <th>
                      <h6 class="fs-4 fw-semibold text-white mb-0">Status</h6>
                  </th>
                  <th>
                      <h6 class="fs-4 fw-semibold text-white mb-0">Budget</h6>
                  </th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-2.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Sunil Joshi</h6>
                              <span class="fw-normal">Web Designer</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">Elite Admin</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-secondary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              S
                          </a>
                          <a href="#" class="text-bg-danger text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              D
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-success-subtle text-success fw-semibold fs-2">Active</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$3.9k</h6>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-3.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Andrew McDownland</h6>
                              <span class="fw-normal">Project Manager</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">Real Homes WP Theme</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-primary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              A
                          </a>
                          <a href="#" class="text-bg-warning text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              X
                          </a>
                          <a href="#" class="text-bg-secondary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              N
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-warning-subtle text-warning fw-semibold fs-2">Pending</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$24.5k</h6>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-4.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Christopher Jamil</h6>
                              <span class="fw-normal">Project Manager</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">MedicalPro WP Theme</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-danger text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              X
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-primary-subtle text-primary fw-semibold fs-2">Completed</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$12.8k</h6>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-5.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Nirav Joshi</h6>
                              <span class="fw-normal">Frontend Engineer</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">Hosting Press HTML</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-primary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              Y
                          </a>
                          <a href="#" class="text-bg-danger text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              X
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-success-subtle text-success fw-semibold fs-2">Active</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$2.4k</h6>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-6.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Micheal Doe</h6>
                              <span class="fw-normal">Content Writer</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">Hosting Press HTML</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-secondary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              S
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-danger-subtle text-danger fw-semibold fs-2">Cancel</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$9.3k</h6>
                  </td>
              </tr>
          </tbody>
      </table>
    </div>

You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`.

###### User | ###### Project Name | ###### Team | ###### Status | ###### Budget
--- | --- | --- | --- | ---
###### Sunil Joshi Web Designer | Elite Admin | S D | Active | ###### $3.9k
###### Andrew McDownland Project Manager | Real Homes WP Theme | A X N | Pending | ###### $24.5k
###### Christopher Jamil Project Manager | MedicalPro WP Theme | X | Completed | ###### $12.8k
###### Nirav Joshi Frontend Engineer | Hosting Press HTML | Y X | Active | ###### $2.4k
###### Micheal Doe Content Writer | Hosting Press HTML | S | Cancel | ###### $9.3k

##### Striped with Inverse Table

##### Striped with Inverse Table - View Code

    <div class="table-responsive" data-bs-theme="dark">
      <table class="table table-striped table-dark border text-nowrap mb-0 align-middle">
          <thead class="text-dark fs-4">
              <tr>
                  <th>
                      <h6 class="fs-4 fw-semibold mb-0">User</h6>
                  </th>
                  <th>
                      <h6 class="fs-4 fw-semibold mb-0">Project Name</h6>
                  </th>
                  <th>
                      <h6 class="fs-4 fw-semibold mb-0">Team</h6>
                  </th>
                  <th>
                      <h6 class="fs-4 fw-semibold mb-0">Status</h6>
                  </th>
                  <th>
                      <h6 class="fs-4 fw-semibold mb-0">Budget</h6>
                  </th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-2.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Sunil Joshi</h6>
                              <span class="fw-normal">Web Designer</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">Elite Admin</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-secondary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              S
                          </a>
                          <a href="#" class="text-bg-danger text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              D
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-success-subtle text-success fw-semibold fs-2">Active</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$3.9k</h6>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-3.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Andrew McDownland</h6>
                              <span class="fw-normal">Project Manager</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">Real Homes WP Theme</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-primary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              A
                          </a>
                          <a href="#" class="text-bg-warning text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              X
                          </a>
                          <a href="#" class="text-bg-secondary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              N
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-warning-subtle text-warning fw-semibold fs-2">Pending</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$24.5k</h6>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-4.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Christopher Jamil</h6>
                              <span class="fw-normal">Project Manager</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">MedicalPro WP Theme</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-danger text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              X
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-primary-subtle text-primary fw-semibold fs-2">Completed</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$12.8k</h6>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-5.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Nirav Joshi</h6>
                              <span class="fw-normal">Frontend Engineer</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">Hosting Press HTML</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-primary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              Y
                          </a>
                          <a href="#" class="text-bg-danger text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              X
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-success-subtle text-success fw-semibold fs-2">Active</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$2.4k</h6>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-6.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Micheal Doe</h6>
                              <span class="fw-normal">Content Writer</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">Hosting Press HTML</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-secondary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              S
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-danger-subtle text-danger fw-semibold fs-2">Cancel</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$9.3k</h6>
                  </td>
              </tr>
          </tbody>
      </table>
    </div>

Use .table-striped to add zebra-striping to any table row within the `<tbody>`.

###### User | ###### Project Name | ###### Team | ###### Status | ###### Budget
--- | --- | --- | --- | ---
###### Sunil Joshi Web Designer | Elite Admin | S D | Active | ###### $3.9k
###### Andrew McDownland Project Manager | Real Homes WP Theme | A X N | Pending | ###### $24.5k
###### Christopher Jamil Project Manager | MedicalPro WP Theme | X | Completed | ###### $12.8k
###### Nirav Joshi Frontend Engineer | Hosting Press HTML | Y X | Active | ###### $2.4k
###### Micheal Doe Content Writer | Hosting Press HTML | S | Cancel | ###### $9.3k

##### Bordered with Inverse Table

##### Bordered with Inverse Table - View Code

    <div class="table-responsive" data-bs-theme="dark">
      <table class="table border text-nowrap table-bordered table-dark mb-0 align-middle">
          <thead class="text-dark fs-4">
              <tr>
                  <th>
                      <h6 class="fs-4 fw-semibold mb-0">User</h6>
                  </th>
                  <th>
                      <h6 class="fs-4 fw-semibold mb-0">Project Name</h6>
                  </th>
                  <th>
                      <h6 class="fs-4 fw-semibold mb-0">Team</h6>
                  </th>
                  <th>
                      <h6 class="fs-4 fw-semibold mb-0">Status</h6>
                  </th>
                  <th>
                      <h6 class="fs-4 fw-semibold mb-0">Budget</h6>
                  </th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-2.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Sunil Joshi</h6>
                              <span class="fw-normal">Web Designer</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">Elite Admin</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-secondary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              S
                          </a>
                          <a href="#" class="text-bg-danger text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              D
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-success-subtle text-success fw-semibold fs-2">Active</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$3.9k</h6>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-3.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Andrew McDownland</h6>
                              <span class="fw-normal">Project Manager</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">Real Homes WP Theme</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-primary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              A
                          </a>
                          <a href="#" class="text-bg-warning text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              X
                          </a>
                          <a href="#" class="text-bg-secondary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              N
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-warning-subtle text-warning fw-semibold fs-2">Pending</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$24.5k</h6>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-4.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Christopher Jamil</h6>
                              <span class="fw-normal">Project Manager</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">MedicalPro WP Theme</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-danger text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              X
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-primary-subtle text-primary fw-semibold fs-2">Completed</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$12.8k</h6>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-5.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Nirav Joshi</h6>
                              <span class="fw-normal">Frontend Engineer</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">Hosting Press HTML</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-primary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              Y
                          </a>
                          <a href="#" class="text-bg-danger text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              X
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-success-subtle text-success fw-semibold fs-2">Active</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$2.4k</h6>
                  </td>
              </tr>
              <tr>
                  <td>
                      <div class="d-flex align-items-center">
                          <img src="../assets/images/profile/user-6.jpg" class="rounded-circle" width="40" height="40" />
                          <div class="ms-3">
                              <h6 class="fs-4 fw-semibold mb-0">Micheal Doe</h6>
                              <span class="fw-normal">Content Writer</span>
                          </div>
                      </div>
                  </td>
                  <td>
                      <p class="mb-0 fw-normal fs-4">Hosting Press HTML</p>
                  </td>
                  <td>
                      <div class="d-flex align-items-center">
                          <a href="#" class="text-bg-secondary text-white fs-6 rounded-circle round-40 me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                              S
                          </a>
                      </div>
                  </td>
                  <td>
                      <span class="badge rounded-pill bg-danger-subtle text-danger fw-semibold fs-2">Cancel</span>
                  </td>
                  <td>
                      <h6 class="fs-4 fw-semibold mb-0">$9.3k</h6>
                  </td>
              </tr>
          </tbody>
      </table>
    </div>

Add `.table-bordered` for borders on all sides of the table and cells.

###### User | ###### Project Name | ###### Team | ###### Status | ###### Budget
--- | --- | --- | --- | ---
###### Sunil Joshi Web Designer | Elite Admin | S D | Active | ###### $3.9k
###### Andrew McDownland Project Manager | Real Homes WP Theme | A X N | Pending | ###### $24.5k
###### Christopher Jamil Project Manager | MedicalPro WP Theme | X | Completed | ###### $12.8k
###### Nirav Joshi Frontend Engineer | Hosting Press HTML | Y X | Active | ###### $2.4k
###### Micheal Doe Content Writer | Hosting Press HTML | S | Cancel | ###### $9.3k

#### Settings

###### Theme

Light Dark

###### Theme Direction

LTR RTL

###### Theme Colors

###### Layout Type

Vertical
Horizontal

###### Container Option

Boxed Full

###### Sidebar Type

Full
Collapse

###### Card With

Border Shadow