gentux-style-guide/_atoms/05-tables.html

<http://gentuxdesign.com>

---
title: Tables
bootstrap-link: http://getbootstrap.com/css/#tables
---


<h3 id="tables-example" class="context--copy">Basic example</h3>

<div class="row">
  <div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-2">
    <p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
    <div class="bs-example" data-example-id="simple-table">
        <table class="table">
            <caption>Optional table caption.</caption>
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
  </div><!-- /col -->
</div><!-- /row -->


<h3 id="tables-striped" class="context--copy">Striped rows</h3>

<div class="row">
  <div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-2">
    <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
    <div class="bs-callout bs-callout-danger" id="callout-tables-striped-ie8">
        <h4>Cross-browser compatibility</h4>
        <p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
    </div>
    <div class="bs-example" data-example-id="striped-table">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
  </div><!-- /col -->
</div><!-- /row -->






<h3 id="tables-bordered" class="context--copy">Bordered table</h3>
<div class="row">
  <div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-2">
    <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
    <div class="bs-example" data-example-id="bordered-table">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
  </div><!-- /col -->
</div><!-- /row -->






<h3 id="tables-hover-rows" class="context--copy">Hover rows</h3>
<div class="row">
  <div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-2">
    <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
    <div class="bs-example" data-example-id="hoverable-table">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
  </div><!-- /col -->
</div><!-- /row -->