BS5 Tables

Basic table

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Project A</td>
      <td>Active</td>
    </tr>
  </tbody>
</table>

Striped rows

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

Hover effect

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

Bordered and borderless

<table class="table table-bordered">...</table>
<table class="table table-borderless">...</table>

Small tables

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

Table variants

Use contextual classes to highlight rows or the whole table.

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

<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>

Responsive tables

Wrap tables in a responsive container to allow horizontal scrolling on small screens.

<div class="table-responsive">
  <table class="table">...</table>
</div>

Best practices

• Use thead for headers and keep column labels short
• Wrap wide tables with table-responsive
• Prefer table-striped for readability