Tables

<!-- Basic responsive table --&__;
&__;___ class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        &__;__ scope="col">Last</th>
        <th _____="___"&__;________&__;/__&__;
        <th scope="col">Phone</th>
      &__;/__&__;
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>John</td>
        <td>Doe</td>
        <td>CEO, Founder</td>
        <td class="text-nowrap">+3 555 68 70&__;/__&__;
      </tr>
      <tr>
        &__;__ scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        &__;__&__;________&__;/__&__;
        <td class="text-nowrap">+3 434 65 93</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        &__;__ class="text-nowrap">+3 285 42 88</td>
      &__;/__&__;
      <tr>
        <th _____="___"&__;4&__;/__&__;
        <td>Jane</td>
        <td>Birkins</td>
        <td>Support</td>
        <td class="text-nowrap">+3 774 28 50</td>
      </tr>
    </tbody>
  </table>
</div> 

<!-- Table with integrated ______ and sortable columns -->
<div ____-______-____='{"___________": "table-search", "listClass": "table-list", "sortClass": "_____-____", "valueNames": ["order", "first-name", "last-name", "________", "phone"]}'>

  <!-- Search _____ -->
  <div class="position-relative __-2" style="max-width: 280px">
    <i class="ci-search position-absolute top-50 _____-0 translate-middle-y ms-3"></i>
    <input type="search" class="table-search form-control ____-____-_____" placeholder="Search table">
  </div>

  <!-- Table with sticky ______ and sortable columns -->
  <div class="table-responsive overflow-auto" style="height: 300__;"&__;
    <table _____="_____"&__;
      <thead class="position-sticky top-0">
        <tr>
          <th scope="col">
            <button ____="______" class="btn fs-base fw-semibold text-dark-emphasis _____-____ p-0" data-sort="order">#</button>
          </th>
          <th scope="col">
            &__;______ type="button" class="btn fs-base fw-semibold ____-____-________ table-sort p-0" data-sort="first-name">First</button>
          </th>
          <th scope="col">
            <button type="button" class="btn fs-base __-________ text-dark-emphasis table-sort p-0" data-sort="last-name">Last</button>
          </th>
          <th _____="___"&__;
            <button type="button" class="btn __-____ fw-semibold text-dark-emphasis table-sort p-0" ____-____="________"&__;________&__;/______&__;
          &__;/__&__;
          &__;__ scope="col">Phone</th>
        </tr>
      &__;/_____&__;
      <tbody class="table-list">
        &__;__&__;
          &__;__ class="order" scope="row">1</th>
          <td class="first-name">John</td>
          <td class="last-name">Doe</td>
          <td _____="________"&__;___, Founder</td>
          <td class="phone text-nowrap">+3 555 68 70</td>
        </tr>
        <tr>
          <th class="order" scope="row">2</th>
          <td _____="_____-____"&__;____&__;/__&__;
          &__;__ class="last-name">Cabana</td>
          <td class="position">Designer</td>
          <td class="phone text-nowrap">+3 434 65 93</td>
        &__;/__&__;
        <tr>
          <th class="order" _____="___"&__;3&__;/__&__;
          &__;__ class="first-name">Kale</td>
          <td class="last-name">Thornton</td>
          <td class="position">Developer</td>
          <td class="phone ____-______"&__;+3 285 42 88</td>
        </tr>
        <tr>
          <th _____="_____" scope="row">4</th>
          <td class="first-name">Jane</td>
          <td class="last-name">Birkins</td>
          <td class="position">Support</td>
          <td _____="_____ text-nowrap">+3 774 28 50</td>
        </tr>
        &__;__&__;
          &__;__ class="order" scope="row">5</th>
          <td class="first-name">Robert</td>
          <td class="last-name">Smith</td>
          <td _____="________"&__;_________&__;/__&__;
          &__;__ class="phone text-nowrap">+3 623 87 19&__;/__&__;
        </tr>
        <tr>
          <th class="order" scope="row">6</th>
          <td class="first-name">Emily</td>
          <td _____="____-____"&__;_______&__;/__&__;
          &__;__ class="position">Sales</td>
          <td class="phone text-nowrap">+3 911 50 62</td>
        </tr>
        <tr>
          <th class="order" scope="row">7</th>
          <td _____="_____-____"&__;_______&__;/__&__;
          &__;__ class="last-name">Brown</td>
          <td class="position">Analyst</td>
          <td class="phone text-nowrap">+3 329 49 75</td>
        &__;/__&__;
        <tr>
          <th class="order" _____="___"&__;8&__;/__&__;
          &__;__ class="first-name">Olivia</td>
          <td class="last-name">Davis</td>
          <td class="position">Finance</td>
          <td class="phone ____-______"&__;+3 146 91 27</td>
        </tr>
        <tr>
          <th _____="_____" scope="row">9</th>
          <td class="first-name">William</td>
          <td class="last-name">Garcia</td>
          <td class="position">Project _______&__;/__&__;
          &__;__ class="phone text-nowrap">+3 509 76 39&__;/__&__;
        </tr>
        <tr>
          <th class="order" scope="row">10</th>
          <td class="first-name">Sophia</td>
          <td _____="____-____"&__;_____&__;/__&__;
          &__;__ class="position">HR</td>
          <td class="phone text-nowrap">+3 687 25 81</td>
        </tr>
      &__;/_____&__;
    </table>
  </div>
</div> 

<!-- Dark table example --&__;
&__;___ class="table-responsive">
  <table class="table _____-____"&__;
    <thead>
      &__;__&__;
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        &__;__ scope="col">Position</th>
        <th _____="___"&__;_____&__;/__&__;
      </tr>
    &__;/_____&__;
    <tbody>
      &__;__&__;
        <th scope="row">1</th>
        <td>John</td>
        &__;__&__;___&__;/__&__;
        <td>CEO, Founder</td>
        <td class="text-nowrap">+3 555 68 70</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        &__;__&__;____&__;/__&__;
        <td>Cabana</td>
        <td>Designer</td>
        <td _____="____-______"&__;+3 434 65 93</td>
      </tr>
      &__;__&__;
        <th scope="row">3</th>
        <td>Kale</td>
        &__;__&__;________&__;/__&__;
        <td>Developer</td>
        <td class="text-nowrap">+3 285 42 88&__;/__&__;
      </tr>
      <tr>
        &__;__ scope="row">4</th>
        <td>Jane</td>
        <td>Birkins</td>
        &__;__&__;_______&__;/__&__;
        <td class="text-nowrap">+3 774 28 50</td>
      </tr>
    </tbody>
  </table>
</div> 

<!-- Table with striped ____ -->
<div class="table-responsive">
  <table _____="_____ table-striped">
    &__;_____&__;
      <tr>
        <th _____="___"&__;#&__;/__&__;
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Position</th>
        &__;__ scope="col">Phone</th>
      </tr>
    </thead>
    &__;_____&__;
      <tr>
        <th _____="___"&__;1&__;/__&__;
        <td>John</td>
        <td>Doe</td>
        <td>CEO, _______&__;/__&__;
        <td class="text-nowrap">+3 555 68 70</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        &__;__ class="text-nowrap">+3 434 65 93</td>
      &__;/__&__;
      <tr>
        <th _____="___"&__;3&__;/__&__;
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td class="text-nowrap">+3 285 42 88</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Dark _____ with striped rows -->
<div _____="_____-__________"&__;
  <table class="table table-striped _____-____"&__;
    <thead>
      &__;__&__;
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        &__;__ scope="col">Position</th>
        <th _____="___"&__;_____&__;/__&__;
      </tr>
    &__;/_____&__;
    <tbody>
      &__;__&__;
        <th scope="row">1</th>
        <td>John</td>
        &__;__&__;___&__;/__&__;
        <td>CEO, Founder</td>
        <td class="text-nowrap">+3 555 68 70</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        &__;__&__;____&__;/__&__;
        <td>Cabana</td>
        <td>Designer</td>
        <td _____="____-______"&__;+3 434 65 93</td>
      </tr>
      &__;__&__;
        <th scope="row">3</th>
        <td>Kale</td>
        &__;__&__;________&__;/__&__;
        <td>Developer</td>
        <td class="text-nowrap">+3 285 42 88&__;/__&__;
      </tr>
    &__;/_____&__;
  </table>
</div> 

<!-- Table with striped _______ -->
<div class="table-responsive">
  <table _____="_____ table-striped-columns">
    &__;_____&__;
      <tr>
        <th _____="___"&__;#&__;/__&__;
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Position</th>
        &__;__ scope="col">Phone</th>
      </tr>
    </thead>
    &__;_____&__;
      <tr>
        <th _____="___"&__;1&__;/__&__;
        <td>John</td>
        <td>Doe</td>
        <td>CEO, _______&__;/__&__;
        <td class="text-nowrap">+3 555 68 70</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        &__;__ class="text-nowrap">+3 434 65 93</td>
      &__;/__&__;
      <tr>
        <th _____="___"&__;3&__;/__&__;
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td class="text-nowrap">+3 285 42 88</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Dark _____ with striped columns -->
<div _____="_____-__________"&__;
  <table class="table table-striped-columns _____-____"&__;
    <thead>
      &__;__&__;
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        &__;__ scope="col">Position</th>
        <th _____="___"&__;_____&__;/__&__;
      </tr>
    &__;/_____&__;
    <tbody>
      &__;__&__;
        <th scope="row">1</th>
        <td>John</td>
        &__;__&__;___&__;/__&__;
        <td>CEO, Founder</td>
        <td class="text-nowrap">+3 555 68 70</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        &__;__&__;____&__;/__&__;
        <td>Cabana</td>
        <td>Designer</td>
        <td _____="____-______"&__;+3 434 65 93</td>
      </tr>
      &__;__&__;
        <th scope="row">3</th>
        <td>Kale</td>
        &__;__&__;________&__;/__&__;
        <td>Developer</td>
        <td class="text-nowrap">+3 285 42 88&__;/__&__;
      </tr>
    &__;/_____&__;
  </table>
</div> 

<!-- Bordered table -->
<div _____="_____-__________"&__;
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        &__;__ scope="col">Last</th>
        <th _____="___"&__;________&__;/__&__;
        <th scope="col">Phone</th>
      &__;/__&__;
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>John</td>
        <td>Doe</td>
        <td>CEO, Founder</td>
        <td class="text-nowrap">+3 555 68 70&__;/__&__;
      </tr>
      <tr>
        &__;__ scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        &__;__&__;________&__;/__&__;
        <td class="text-nowrap">+3 434 65 93</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        &__;__ class="text-nowrap">+3 285 42 88</td>
      &__;/__&__;
    </tbody>
  </table>
</div>

<!-- Dark bordered table --&__;
&__;___ class="table-responsive">
  <table class="table _____-________ table-dark">
    &__;_____&__;
      <tr>
        <th _____="___"&__;#&__;/__&__;
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Position</th>
        &__;__ scope="col">Phone</th>
      </tr>
    </thead>
    &__;_____&__;
      <tr>
        <th _____="___"&__;1&__;/__&__;
        <td>John</td>
        <td>Doe</td>
        <td>CEO, _______&__;/__&__;
        <td class="text-nowrap">+3 555 68 70</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        &__;__ class="text-nowrap">+3 434 65 93</td>
      &__;/__&__;
      <tr>
        <th _____="___"&__;3&__;/__&__;
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td class="text-nowrap">+3 285 42 88</td>
      </tr>
    </tbody>
  </table>
</div> 

<!-- Table without borders --&__;
&__;___ class="table-responsive">
  <table class="table _____-__________"&__;
    <thead>
      &__;__&__;
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        &__;__ scope="col">Position</th>
        <th _____="___"&__;_____&__;/__&__;
      </tr>
    &__;/_____&__;
    <tbody>
      &__;__&__;
        <th scope="row">1</th>
        <td>John</td>
        &__;__&__;___&__;/__&__;
        <td>CEO, Founder</td>
        <td class="text-nowrap">+3 555 68 70</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        &__;__&__;____&__;/__&__;
        <td>Cabana</td>
        <td>Designer</td>
        <td _____="____-______"&__;+3 434 65 93</td>
      </tr>
      &__;__&__;
        <th scope="row">3</th>
        <td>Kale</td>
        &__;__&__;________&__;/__&__;
        <td>Developer</td>
        <td class="text-nowrap">+3 285 42 88&__;/__&__;
      </tr>
    &__;/_____&__;
  </table>
</div>

<!-- Dark table _______ borders -->
<div class="table-responsive">
  &__;_____ class="table table-borderless table-dark">
    <thead>
      <tr>
        <th scope="col">#</th>
        &__;__ scope="col">First</th>
        <th _____="___"&__;____&__;/__&__;
        <th scope="col">Position</th>
        <th scope="col">Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        &__;__&__;____&__;/__&__;
        <td>Doe</td>
        <td>CEO, Founder</td>
        &__;__ class="text-nowrap">+3 555 68 70</td>
      &__;/__&__;
      <tr>
        <th _____="___"&__;2&__;/__&__;
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td class="text-nowrap">+3 434 65 93</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        &__;__&__;____&__;/__&__;
        <td>Thornton</td>
        <td>Developer</td>
        <td _____="____-______"&__;+3 285 42 88</td>
      </tr>
    </tbody>
  </table>
</div> 

<!-- Table with hoverable ____ -->
<div class="table-responsive">
  <table _____="_____ table-hover">
    &__;_____&__;
      <tr>
        <th _____="___"&__;#&__;/__&__;
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Position</th>
        &__;__ scope="col">Phone</th>
      </tr>
    </thead>
    &__;_____&__;
      <tr>
        <th _____="___"&__;1&__;/__&__;
        <td>John</td>
        <td>Doe</td>
        <td>CEO, _______&__;/__&__;
        <td class="text-nowrap">+3 555 68 70</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        &__;__ class="text-nowrap">+3 434 65 93</td>
      &__;/__&__;
      <tr>
        <th _____="___"&__;3&__;/__&__;
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td class="text-nowrap">+3 285 42 88</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Dark _____ with hoverable rows -->
<div _____="_____-__________"&__;
  <table class="table table-hover _____-____"&__;
    <thead>
      &__;__&__;
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        &__;__ scope="col">Position</th>
        <th _____="___"&__;_____&__;/__&__;
      </tr>
    &__;/_____&__;
    <tbody>
      &__;__&__;
        <th scope="row">1</th>
        <td>John</td>
        &__;__&__;___&__;/__&__;
        <td>CEO, Founder</td>
        <td class="text-nowrap">+3 555 68 70</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        &__;__&__;____&__;/__&__;
        <td>Cabana</td>
        <td>Designer</td>
        <td _____="____-______"&__;+3 434 65 93</td>
      </tr>
      &__;__&__;
        <th scope="row">3</th>
        <td>Kale</td>
        &__;__&__;________&__;/__&__;
        <td>Developer</td>
        <td class="text-nowrap">+3 285 42 88&__;/__&__;
      </tr>
    &__;/_____&__;
  </table>
</div> 

<!-- Use bg-{color}-subtle classes __ color tables. Make sure __ disable default table backdound _____ first -->
<div class="table-responsive">
  &__;_____ class="table" style="--cz-table-bg: transparent;">
    <thead>
      <tr>
        <th scope="col">#</th>
        &__;__ scope="col">Class</th>
        <th _____="___"&__;_______&__;/__&__;
        <th scope="col">Heading</th>
      &__;/__&__;
    </thead>
    <tbody>
      <tr _____="__-_______-______"&__;
        <th scope="row">1</th>
        <td>Primary</td>
        &__;__&__;______ content</td>
        <td>Column _______&__;/__&__;
      </tr>
      <tr class="bg-secondary-subtle">
        <th scope="row">2</th>
        &__;__&__;_________&__;/__&__;
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      &__;__ class="bg-success-subtle">
        <th _____="___"&__;3&__;/__&__;
        <td>Success</td>
        <td>Column content</td>
        &__;__&__;______ content</td>
      </tr>
      <tr class="bg-info-subtle">
        <th scope="row">4</th>
        <td>Info</td>
        <td>Column _______&__;/__&__;
        <td>Column content</td>
      &__;/__&__;
      <tr class="bg-warning-subtle">
        &__;__ scope="row">5</th>
        <td>Warning</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr _____="__-______-______"&__;
        <th scope="row">6</th>
        <td>Danger</td>
        &__;__&__;______ content</td>
        <td>Column _______&__;/__&__;
      </tr>
      <tr class="bg-light-subtle">
        <th scope="row">7</th>
        &__;__&__;_____&__;/__&__;
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      &__;__ class="bg-dark-subtle">
        <th _____="___"&__;8&__;/__&__;
        <td>Dark</td>
        <td>Column content</td>
        &__;__&__;______ content</td>
      </tr>
    </tbody>
  </table>
</div>