FlexFlashFast - Using table.

by Yure Pereira

HTML

<link rel="stylesheet" href="https://raw.githubusercontent.com/YurePereira/FlexFlashFast/master/css/f3.tables.css">
<h3>Simples table:</h3>
<table class="table">
  <thead>
    <tr>
      <th>Name:</th>
      <th>Last name:</th>
      <th>Age:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>João</td>
      <td>Pedro</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Lucas</td>
      <td>Silva</td>
      <td>32</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>Fernanda</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

<h3>List table:</h3>
<table class="table table-list">
  <thead>
    <tr>
      <th>Name:</th>
      <th>Last name:</th>
      <th>Age:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>João</td>
      <td>Pedro</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Lucas</td>
      <td>Silva</td>
      <td>32</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>Fernanda</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

<h3>Table super small:</h3>
<table class="table table-super-small">
  <thead>
    <tr>
      <th>Name:</th>
      <th>Last name:</th>
      <th>Age:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>João</td>
      <td>Pedro</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Lucas</td>
      <td>Silva</td>
      <td>32</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>Fernanda</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

<h3>Table super small:</h3>
<table class="table table-super-small">
  <thead>
    <tr>
      <th>Name:</th>
      <th>Last name:</th>
      <th>Age:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>João</td>
      <td>Pedro</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Lucas</td>
      <td>Silva</td>
      <td>32</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>Fernanda</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

<h3>Table small:</h3>
<table class="table table-small">
  <thead>
    <tr>
      <th>Name:</th>
      <th>Last name:</th>
     ...

CSS

.table-responsive{overflow:auto}.table-no-border{border-style:none}table.table{width:100%;margin:5px 0}table.table caption{font-size:20px;font-weight:normal;padding:10px 0}table.table tr th,table.table tr td{padding:10px;border:1px solid #ccc;word-break:break-word;font-size:12px}table.table tr td.table-header{font-size:13px;font-weight:700;background:#FBFBFB}table.table tr td.vertical-align-top{vertical-align:top}table.table tr td.vertical-align-bottom{vertical-align:bottom}table.table tr td.vertical-align-center{vertical-align:middle}table.table thead tr{background:#FBFBFB}table.table thead tr th{font-size:13px;font-weight:700;padding:10px 5px;border-bottom:1px solid #909090}table.table.table-list tr>th,table.table.table-list tr>td{border:0;border-top:1px solid #ccc}table.table.table-hover tbody tr:hover{background:#F8F8F8}table.table.table-hover tbody tr:hover td:hover{background:#EDEDED}table.table.table-super-small tr th,table.table.table-super-small tr td{padding:5px;font-size:.8em}table.table.table-small tr th,table.table.table-small tr td{padding:7px;font-size:1em}table.table.table-medium tr th,table.table.table-medium tr td{padding:12px;font-size:1.2em}table.table.table-great tr th,table.table.table-great tr td{padding:15px;font-size:1.4em}