Table

Standalone Library

You can download the plugin as a standalone library in this page.

Or simply insert this into your <head> element:

<link rel="stylesheet" href="https://unpkg.com/mobi-plugin-table/dist/mobi-plugin-table.min.css" />

Simple Table

Add a .table class to <table> element:

Heading	Heading	Heading
1.1	1.2	1.3
2.1	2.2	2.3
Footer 1	Footer 2	Footer 3

<table class="table">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
    </tr>
  </tfoot>
</table>

Scrollable Table

Tables typically render out of the viewable area on small mobile devices. If so, use the .scroll-view wrapper to make your table scrollable.

Heading	Heading	AVeryVeryLongHeading	Heading	Heading
1.1	1.2	1.3	1.4	1.5
2.1	2.2	2.3	2.4	2.5
Footer 1	Footer 2	Footer 3	Footer 4	Footer 5

<div class="scroll-view">
  <table class="table">
    <thead>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
        <th>AVeryVeryLongHeading</th>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
      </tr>
      <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
        <td>Footer 4</td>
        <td>Footer 5</td>
      </tr>
    </tfoot>
  </table>
</div>

Caption in Table

Table Caption
Header 1	Header 2	Header 3
1.1	1.2	1.3
2.1	2.2	2.3
Footer 1	Footer 2	Footer 3

<table class="table">
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
    </tr>
  </tfoot>
</table>