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>
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>
To give content the layout properties of a table without using the table
element, use the .table
, .th
, .tr
and .td
classes.
<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>