Bootstrap 5 Table

• The .table class adds basic styling to a table: A basic Bootstrap 5 table has a light padding and horizontal dividers.
• Basic table: The .table class adds basic styling to a table:
• The .table-bordered class adds borders on all sides of the table and cells:
• The .table-borderless class removes borders from the table:
• The .table-striped class adds zebra-stripe rows to a table:
• Contextual classes can be used to color the table, table rows or table cells.
  • The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:
• The .table-hover class adds a hover effect (grey background color) on table rows:
• The .table-sm class makes the table smaller by cutting cell padding in half:
• The .table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally):
• You can also decide when the table should get a scrollbar, depending on the screen width:
  • Class Screen width
  • .table-responsive-sm < 576px
  • .table-responsive-md < 768px
  • .table-responsive-lg < 992px
  • .table-responsive-xl < 1200px
  • .table-responsive-xxl < 1400px

    <table class="table">
        ...
    </table>

  Striped Rows

  The .table-striped class adds zebra-stripes to a table:

          <thead>
            <tr class="table__header">
              <th class="table__cell">

              </th>
              <th class="table__cell">Service</th>
              <th class="table__cell">Contract no.</th>
              <th class="table__cell">Additional information</th>
              <th class="table__cell">Active since</th>
              <th class="table__cell">Renews on</th>
            </tr>
          </thead>

          <colgroup>
            <col width="52px">
            <col width="50%">
            <col width="112px">
            <col width="50%">
            <col width="104px">
            <col width="104px">
          </colgroup>

          <thead>
            <tr class="table__header">
              <th class="table__cell">

              </th>
              <th class="table__cell">Service</th>
              <th class="table__cell">Contract no.</th>
              <th class="table__cell">Additional information</th>
              <th class="table__cell">Active since</th>
              <th class="table__cell">Renews on</th>
            </tr>
          </thead>

          <tbody>

<td class="table__cell table__cell--vertical-align-center">
  <img height="32" width="auto" src="/account/images/fragments/svg-icons/contract.svg">
</td>

<td class="table__cell">
  <ul>

    <li class="paragraph--activating paragraph--bold paragraph--ellipsized">
      <a class="link" href="/account/subscriptions/98581085?linkId=ct.txt.contract-in-table">IONOS Agency Partner Program Membership</a>
    </li>






      <li>Contract</li>

  </ul>
</td>

<td class="table__cell">
  <strong>98581085</strong>
</td>

<td class="table__cell contract-domains-cell">







  Free contract

<td class="table__cell">
  <span>10/26/2023</span>

</td>

<td class="table__cell renews-on-cell">

  <span class="large-hidden medium-hidden">-</span>
</td>

<td class="table__cell table__cell--vertical-align-center">
  <img height="32" width="auto" src="/account/images/fragments/svg-icons/contract.svg">
</td>

<td class="table__cell">
  <ul>

    <li class="paragraph--activating paragraph--bold paragraph--ellipsized">
      <a class="link" href="/account/subscriptions/98581086?linkId=ct.txt.contract-in-table">IONOS VPS Linux L - Server26</a>
    </li>






      <li>Contract</li>

  </ul>
</td>

<td class="table__cell">
  <strong>98581086</strong>
</td>

<td class="table__cell contract-domains-cell">

<td class="table__cell">
  <span>10/26/2023</span>

</td>

<td class="table__cell renews-on-cell">
  <span>10/25/2024</span>

</td>

<td class="table__cell table__cell--vertical-align-center no-icon-cell">
</td>

<td class="table__cell">
  <ul>

    <li class="paragraph--activating paragraph--ellipsized">
      <a class="link" href="/account/subscriptions/98581086/982071387-9?linkId=ct.txt.domain-in-table">eng2x.com</a>
    </li>






      <li>Additional domain</li>

  </ul>
</td>

<td class="table__cell">
  98581086
</td>

<td class="table__cell contract-domains-cell small-hidden">
  <span>External domain</span>
</td>

<td class="table__cell">
  <span>10/27/2023</span>

</td>

<td class="table__cell renews-on-cell">

  <span class="large-hidden medium-hidden">-</span>
</td>

<td class="table__cell table__cell--vertical-align-center">
  <img height="32" width="auto" src="/account/images/fragments/svg-icons/contract.svg">
</td>

<td class="table__cell">
  <ul>

    <li class="paragraph--activating paragraph--bold paragraph--ellipsized">
      <a class="link" href="/account/subscriptions/100022315?linkId=ct.txt.contract-in-table">IONOS VPS Linux XL - Server28</a>
    </li>






      <li>Contract</li>

  </ul>
</td>

<td class="table__cell">
  <strong>100022315</strong>
</td>

<td class="table__cell contract-domains-cell">

<td class="table__cell">
  <span>01/29/2024</span>

</td>

<td class="table__cell renews-on-cell">
  <span>01/28/2025</span>

</td>

<td class="table__cell table__cell--vertical-align-center">
  <img height="32" width="auto" src="/account/images/fragments/svg-icons/contract.svg">
</td>

<td class="table__cell">
  <ul>

    <li class="paragraph--activating paragraph--bold paragraph--ellipsized">
      <a class="link" href="/account/subscriptions/102121974?linkId=ct.txt.contract-in-table">IONOS VPS Linux L</a>
    </li>






      <li>Contract</li>

  </ul>
</td>

<td class="table__cell">
  <strong>102121974</strong>
</td>

<td class="table__cell contract-domains-cell">

<td class="table__cell">
  <span>07/01/2024</span>

</td>

<td class="table__cell renews-on-cell">
  <span>06/30/2025</span>

</td>

          </tbody>

        </table>

Bordered Table

The .table-bordered class adds borders on all sides of the table and the cells: