Docs - Tables

Connect .pi-tables to use tables

Table HTML structure Example

<table class="pi-table">
  <thead>
    <tr>
      <th>
        Column 1 title
      </th>
      <th>
        Column 2 title
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Column 1 content
      </td>
      <td>
        Column 2 content
      </td>
    </tr>
  </tbody>
</table>

Add .pi-table to table

Column 1 title	Column 2 title
Column 1 content	Column 2 content
Column 1 content	Column 2 content
Column 1 content	Column 2 content

Table complex

Add .pi-table-complex to table to make it a bit complex

Column 1 title	Column 2 title
Column 1 content	Column 2 content
Column 1 content	Column 2 content
Column 1 content	Column 2 content

<table class="pi-table pi-table-complex">
  <thead>
  <tr>
    <th>
      Column 1 title
    </th>
    <th>
      Column 2 title
    </th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
      Column 1 content
    </td>
    <td>
      Column 2 content
    </td>
  </tr>
  </tbody>
</table>

Table with round borders

Add .pi-round to table to make it has round corners

Column 1 title	Column 2 title
Column 1 content	Column 2 content
Column 1 content	Column 2 content
Column 1 content	Column 2 content

<table class="pi-table pi-table-complex pi-round">
  <thead>
  <tr>
    <th>
      Column 1 title
    </th>
    <th>
      Column 2 title
    </th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
      Column 1 content
    </td>
    <td>
      Column 2 content
    </td>
  </tr>
  </tbody>
</table>

Table with all borders

Add .pi-table-all-borders to table to make it has all borders

Column 1 title	Column 2 title
Column 1 content	Column 2 content
Column 1 content	Column 2 content
Column 1 content	Column 2 content

<table class="pi-table pi-table-complex pi-round pi-table-all-borders">
  <thead>
  <tr>
    <th>
      Column 1 title
    </th>
    <th>
      Column 2 title
    </th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
      Column 1 content
    </td>
    <td>
      Column 2 content
    </td>
  </tr>
  </tbody>
</table>

Zebra Tables

Add .pi-table-zebra to table to make it to be like zebra

Column 1 title	Column 2 title
Column 1 content	Column 2 content
Column 1 content	Column 2 content
Column 1 content	Column 2 content

<table class="pi-table pi-table-complex pi-round pi-table-all-borders pi-table-zebra">
  <thead>
  <tr>
    <th>
      Column 1 title
    </th>
    <th>
      Column 2 title
    </th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>
      Column 1 content
    </td>
    <td>
      Column 2 content
    </td>
  </tr>
  </tbody>
</table>