Tables - Solid

Default Table

Solid's default table styling doesn't require any utility classes. Optionally, the width of individual columns can be set using Solid's column classes, as shown below:

Title	Views	Social Lift
16 Easy Cheese Hacks That Will Blow Your Mind	1,241	1.1x
18 Times George Michael Bluth Understood You On A Personal Level	6,468	1.2x
Here's An Epic Video Of Yoda Blowing A Bunch Of Sh*t Up	8,516	1.7x

<table>
  <tr>
    <th class="xs-col-6">Title</th>
    <th class="xs-col-3">Views</th>
    <th class="xs-col-3">Social Lift</th>
  </tr>
  <tr>
    <td>16 Easy Cheese Hacks That Will Blow Your Mind</td>
    <td>1,241</td>
    <td>1.1x</td>
  </tr>
  <tr>
    <td>18 Times George Michael Bluth Understood You On A Personal Level</td>
    <td>6,468</td>
    <td>1.2x</td>
  </tr>
  <tr>
    <td>Here's An Epic Video Of Yoda Blowing A Bunch Of Sh*t Up</td>
    <td>8,516</td>
    <td>1.7x</td>
  </tr>
</table>

Bordered Table

Use the .table-border class to automatically add borders to your table and all its rows.

Title	Views	Social Lift
16 Easy Cheese Hacks That Will Blow Your Mind	1,241	1.1x
18 Times George Michael Bluth Understood You On A Personal Level	6,468	1.2x
Here's An Epic Video Of Yoda Blowing A Bunch Of Sh*t Up	8,516	1.7x

<table class="table-border">
  <tr>
    <th class="xs-col-6">Title</th>
    <th class="xs-col-3">Views</th>
    <th class="xs-col-3">Social Lift</th>
  </tr>
  <tr>
    <td>16 Easy Cheese Hacks That Will Blow Your Mind</td>
    <td>1,241</td>
    <td>1.1x</td>
  </tr>
  <tr>
    <td>18 Times George Michael Bluth Understood You On A Personal Level</td>
    <td>6,468</td>
    <td>1.2x</td>
  </tr>
  <tr>
    <td>Here's An Epic Video Of Yoda Blowing A Bunch Of Sh*t Up</td>
    <td>8,516</td>
    <td>1.7x</td>
  </tr>
</table>

Faux Table Layout

To give content the layout properties of a table without using the table element, use the .table, .th, .tr and .td classes.

Lines of different lengths

Will automatically expand their inner divs to be as tall as each other.

Because tables are the most amazing things in the whole world don't you agree? Wait where are you going? Come back!

<div class="table">
  <div class="td">Lines of different lengths</div>
  <div class="td">Will automatically expand their inner divs to be as tall as each other.</div>
  <div class="td">Because tables are the most amazing things in the whole world don't you agree? Wait where are you going? Come back!</div>
</div>