Table

Basic Table

The ss-table class is used to display a basic table.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Striped Table

The ss-striped class is used to add zebra-stripes to a table.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table ss-striped">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Bordered Table

The ss-bordered class adds a bottom border to each table row.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table ss-bordered">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Striped With Bordered Table

Combine the ss-striped class and the ss-bordered class to create a striped bordered table.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table ss-striped ss-bordered">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

All Together

The ss-table-all class combines all of the classes above.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Flipping The Stripes

To flip the stripes (start with the light-gray color), add a <thead> element around the table header row. You must also define a color to be used for the table header row.

<table class="ss-table-all">
  <thead>
    <tr class="ss-bg-light-gray">
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </thead>
</table>

Hoverable Table

The ss-hoverable class adds a grey background color on mouse-over.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all ss-hoverable">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Hover Color

If you want a specific hover color, add any of the ss-hvr-color classes to each <tr> element.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr class="ss-hvr-bg-brown">
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Centering All Content

The ss-centered class centers the content of the table.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all ss-centered">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Centering One Column

The ss-center class centers the content of a column.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all">
  <tr>
    <th>First Name</th>
    <th class="ss-center">Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td class="ss-center">Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Right Align One Column

The ss-right-align class right aligns the content of a column.

<table class="ss-table-all">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th class="ss-right-align">Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td class="ss-right-align">50</td>
  </tr>
  ...
</table>

Combining With SysaCSS Classes

Many SysaCSS classes can be used on all HTML elements.
For example on Table: border classes, color classes, font classes, card classes, and more can be used to beautify tables.

Colored Table Header

Use any of the ss-bg-color classes to display a colored row.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all">
  <tr class="ss-bg-brand">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Colored Table

Use any of the ss-bg-color classes to display a colored table.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all ss-bg-sand">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Responsive Table

The ss-responsive class creates a responsive table. The table will then scroll horizontally on small screens.
When viewing on large screens, there is no difference.

First Name	Last Name	Age
John	Doe	50

<div class="ss-responsive">
  <table class="ss-table-all">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>50</td>
    </tr>
    ...
  </table>
</div>

Table As a Card

Use a ss-card class to display a table as a card.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all ss-card">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Tiny Table

Use the ss-tiny class to display a tiny table.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all ss-tiny">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Small Table

Use the ss-small class to display a small table.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all ss-small">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Large Table

Use the ss-large class to display a large table.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all ss-large">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Xlarge Table

Use the ss-xlarge class to display an xlarge table.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all ss-xlarge">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Xxlarge Table

Use the ss-xxlarge class to display an xxlarge table.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all ss-xxlarge">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Xxxlarge Table

Use the ss-xxxlarge class to display an xxxlarge table.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all ss-xxxlarge">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>

Jumbo Table

Use the ss-jumbo class to display a jumbo large table.

First Name	Last Name	Age
John	Doe	50

<table class="ss-table-all ss-jumbo">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  ...
</table>