Basic Tables header small text goes here...

Default Table

# Username Email Address
1 Nicky Almera [email protected]
2 Edmund Wong [email protected]
3 Harvinder Singh [email protected]
<table class="table">
  ...
</table>

Hover Table

# Username Email Address
1 Nicky Almera [email protected]
2 Edmund Wong [email protected]
3 Harvinder Singh [email protected]
<table class="table table-hover">
  ...
</table>

Table Small

# Username Email Address
1 Nicky Almera [email protected]
2 Edmund Wong [email protected]
3 Harvinder Singh [email protected]
<table class="table table-sm">
  ...
</table>

Responsive Table

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Table Striped

# Username Email Address
1 Nicky Almera [email protected]
2 Edmund Wong [email protected]
3 Harvinder Singh [email protected]
<table class="table table-striped">
  ...
</table>

Bordered Table

# Username Email Address
1 Nicky Almera [email protected]
2 Edmund Wong [email protected]
3 Harvinder Singh [email protected]
<table class="table table-bordered">
  ...
</table>

UI Elements in Table NEW

# Username Email Address
Nicky Almera [email protected] Edit Delete
Edmund Wong [email protected]
Harvinder Singh [email protected] Edit Delete
<table class="table align-middle">
  ...
</table>

Form Elements in Table NEW

Username Email Address
Nicky Almera [email protected]
Edmund Wong [email protected]
[email protected]
@
[email protected]
<table class="table align-middle">
  <tbody>
    <tr>
      <!-- with input -->
      <td>
        <input type="text" class="form-control my-n1" />
      </td>
    </tr>
    
    <tr>
      <!-- with input-group -->
      <td>
        <div class="input-group my-n1"></div>
      </td>
    </tr>
    
    <tr>
      <!-- with btn-group -->
      <td>
        <div class="btn-group my-n1"></div>
      </td>
    </tr>
  </tbody>
</table>

Table Row Classes

# Username Email Address
1 Nicky Almera [email protected]
2 Terry Khoo [email protected]
3 Edmund Wong [email protected]
4 Harvinder Singh [email protected]
5 Terry Khoo [email protected]
<table class="table">
  <tbody>
    <tr class="table-active">...</tr>
    <tr class="table-info">...</tr>
    <tr class="table-success">...</tr>
    <tr class="table-warning">...</tr>
    <tr class="table-danger">...</tr>
  </tbody>
</table>
App Settings
Header Fixed
Header Inverse
Sidebar Fixed
Gradient Enabled
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage