Fork me on GitHub

Aoi (青い) style guide

Table

Use the table class on tables to apply a clean, borderless layout, and separate headings from the body with a horizontal line.

One Two Three
One Two Three
One Two Three
<table class="table">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
</table>

Compact Table

Use the table-compact modifier class on tables to reduce the cell padding for a more compact layout.

One Two Three
One Two Three
One Two Three
<table class="table table-compact">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
</table>

Striped Table

Use the table-striped modifier class on tables to apply a striped pattern to visually separate rows.

One Two Three
One Two Three
One Two Three
<table class="table table-striped">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
</table>

Adding a color class, e.g. blue or plum, to a table-striped table, you can customize the color of stripes.

One Two Three
One Two Three
One Two Three
<table class="table table-striped blue">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
</table>
One Two Three
One Two Three
One Two Three
<table class="table table-striped red">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
</table>
One Two Three
One Two Three
One Two Three
<table class="table table-striped plum">
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
    <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr>
</table>