Tables

Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Gameforest.

Example

All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

# Nickname Registered Role Actions
1 YAKUZI 14/06/2017 User
2 Venom 24/03/2017 Moderator
3 Elizabeth 12/06/2017 Administrator
4 Clark Kent 11/06/2017 Administrator 
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Nickname</th>
      <th>Registered</th>
      <th>Role</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>YAKUZI</td>
      <td>14/06/2017</td>
      <td>User</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Venom</td>
      <td>24/03/2017</td>
      <td>Moderator</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Elizabeth</td>
      <td>12/06/2017</td>
      <td>Administrator</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Clark Kent</td>
      <td>11/06/2017</td>
      <td>Administrator</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
  </tbody>
</table>

Striped rows

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

# Nickname Registered Role Actions
1 YAKUZI 14/06/2017 User
2 Venom 24/03/2017 Moderator
3 Elizabeth 12/06/2017 Administrator
4 Clark Kent 11/06/2017 Administrator 
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Nickname</th>
      <th>Registered</th>
      <th>Role</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>YAKUZI</td>
      <td>14/06/2017</td>
      <td>User</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Venom</td>
      <td>24/03/2017</td>
      <td>Moderator</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Elizabeth</td>
      <td>12/06/2017</td>
      <td>Administrator</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Clark Kent</td>
      <td>11/06/2017</td>
      <td>Administrator</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
  </tbody>
</table>

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

# Nickname Registered Role Actions
1 YAKUZI 14/06/2017 User
2 Venom 24/03/2017 Moderator
3 Elizabeth 12/06/2017 Administrator
4 Clark Kent 11/06/2017 Administrator 
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Nickname</th>
      <th>Registered</th>
      <th>Role</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>YAKUZI</td>
      <td>14/06/2017</td>
      <td>User</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Venom</td>
      <td>24/03/2017</td>
      <td>Moderator</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Elizabeth</td>
      <td>12/06/2017</td>
      <td>Administrator</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Clark Kent</td>
      <td>11/06/2017</td>
      <td>Administrator</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
  </tbody>
</table>

Responsive

Create responsive tables by adding .table-responsive to any .table to make them scroll horizontally on small devices. When viewing on anything larger than 768px wide, you will not see any difference in these tables.

# Nickname Registered Role Actions
1 YAKUZI 14/06/2017 User
2 Venom 24/03/2017 Moderator
3 Elizabeth 12/06/2017 Administrator
4 Clark Kent 11/06/2017 Administrator 
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Nickname</th>
      <th>Registered</th>
      <th>Role</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>YAKUZI</td>
      <td>14/06/2017</td>
      <td>User</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Venom</td>
      <td>24/03/2017</td>
      <td>Moderator</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Elizabeth</td>
      <td>12/06/2017</td>
      <td>Administrator</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Clark Kent</td>
      <td>11/06/2017</td>
      <td>Administrator</td>
      <td>
        <a class="btn btn-link p-a-5" href="#" title="Delete"><i class="fa fa-trash-o"></i></a>
        <a class="btn btn-link p-a-5" href="#" title="Edit"><i class="fa fa-pencil"></i></a>
      </td>
    </tr>
  </tbody>
</table>
version: 4.1.2