Let's have fun

Let's have fun

Table

Info

The table of this framework is responsive and can be made with or without borders, with or without zebra, texts and headers left, right or center alignment, 100% width or width to content, center the table. And of course the table is 100% responsive.

The table

Head Head Head
Contents Contents Contents
Contents Contents Contents
Contents Contents Contents
Contents Contents Contents 
table
<div class="table">
  <table>
    <tr>
      <th>Head</th>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </table>
</div>

Center Header

Head Head Head
Contents Contents Contents
Contents Contents Contents 
table th-center
<div class="table th-center">
  <table>
    <tr>
      <th>Head</th>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </table>
</div>

Center Contents

Head Head Head
Contents Contents Contents
Contents Contents Contents 
table td-center
<div class="table td-center">
  <table>
    <tr>
      <th>Head</th>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </table>
</div>

Header right

Head Head Head
Contents Contents Contents
Contents Contents Contents 
table th-right
<div class="table th-right">
  <table>
    <tr>
      <th>Head</th>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </table>
</div>

Contents right

Head Head Head
Contents Contents Contents
Contents Contents Contents 
table td-right
<div class="table td-right">
  <table>
    <tr>
      <th>Head</th>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </table>
</div>

No border

Head Head Head
Contents Contents Contents
Contents Contents Contents 
table no-border
<div class="table no-border">
  <table>
    <tr>
      <th>Head</th>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </table>
</div>

No zebra

Head Head Head
Contents Contents Contents
Contents Contents Contents 
table no-zebra
<div class="table no-zebra">
  <table>
    <tr>
      <th>Head</th>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </table>
</div>

With hover

Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-hover
<div class="table table-hover">
  <table>
    <tr>
      <th>Head</th>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </table>
</div>

As broad as the content

Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-fit
<div class="table table-fit">
  <table>
    <tr>
      <th>Head</th>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </table>
</div>

As broad as the content and center

Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-fit
box-center
<div class="table table-fit">
  <table class="box-center">
    <tr>
      <th>Head</th>
    </tr>
    <tr>
      <td>Text</td>
    </tr>
  </table>
</div>

Responsive

Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head Head
Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents
Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents Contents

Colors

Black
Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-black
<div class="table table-black">
White
Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-white
<div class="table table-white">
Gray
Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-gray
<div class="table table-gray">
Blue
Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-blue
<div class="table table-blue">
Green
Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-green
<div class="table table-green">
Teal
Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-teal
<div class="table table-teal">
Red
Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-red
<div class="table table-red">
Yellow
Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-yellow
<div class="table table-yellow">
Orange
Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-orange
<div class="table table-orange">
Brown
Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-brown
<div class="table table-brown">
Purple
Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-purple
<div class="table table-purple">
Pink
Head Head Head
Contents Contents Contents
Contents Contents Contents 
table table-pink
<div class="table table-pink">