## Table

- Home
- Shortcodes
- Table

## Table style 1

Product | Total
--- | ---
Dummy Product Name x 2 | $86.00
Dummy Product Name x 1 | $69.00
Cart Subtotal | $155.00
Shipping and Handing | $15.00
Vat | $00.00
Order Total | $170.00

        <div class="our-order payment-details">
        <table>
        <thead>
        <tr>
        <th><strong>Product</strong></th>
        <th class="text-end"><strong>Total</strong></th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td>Dummy Product Name  x 2</td>
        <td class="text-end">$86.00</td>
        </tr>
        <tr>
        <td>Dummy Product Name  x 1</td>
        <td class="text-end">$69.00</td>
        </tr>
        <tr>
        <td>Cart Subtotal</td>
        <td class="text-end">$155.00</td>
        </tr>
        <tr>
        <td>Shipping and Handing</td>
        <td class="text-end">$15.00</td>
        </tr>
        <tr>
        <td>Vat</td>
        <td class="text-end">$00.00</td>
        </tr>
        <tr>
        <td>Order Total</td>
        <td class="text-end">$170.00</td>
        </tr>
        </tbody>
        </table>
        </div>

        /* payment-details */
        .payment-details table { width: 100%;}
        .payment-details table th {
        background: #f5f5f5 none repeat scroll 0 0;
        color: #666;
        font-weight: 900;
        padding: 10px 30px;
        text-transform: uppercase;
        }
        .payment-details table td{
        color: #999;
        font-weight: 700;
        padding: 7px 30px;
        }
        .payment-details table tr {
        border-bottom: 1px solid #E5E5E5;
        }
        .payment-details table tr:last-child {
        border-bottom: 0;
        }
        .payment-details table tr:last-child td {
        color: #c87065;
        padding: 15px 30px 0;
        }

## Table style 2

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

        <table class="table table-condensed">
        <thead>
        <tr>
        <th>
        #
        </th>
        <th>
        First Name
        </th>
        <th>
        Last Name
        </th>
        <th>
        Username
        </th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td>
        1
        </td>
        <td>
        Mark
        </td>
        <td>
        Otto
        </td>
        <td>
        @mdo
        </td>
        </tr>
        <tr>
        <td>
        2
        </td>
        <td>
        Jacob
        </td>
        <td>
        Thornton
        </td>
        <td>
        @fat
        </td>
        </tr>
        <tr>
        <td>
        3
        </td>
        <td>
        Larry
        </td>
        <td>
        the Bird
        </td>
        <td>
        @twitter
        </td>
        </tr>
        </tbody>
        </table>

## Table style 3

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

        <table class="table table-bordered">
        <thead>
        <tr>
        <th>
        #
        </th>
        <th>
        First Name
        </th>
        <th>
        Last Name
        </th>
        <th>
        Username
        </th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td>
        1
        </td>
        <td>
        Mark
        </td>
        <td>
        Otto
        </td>
        <td>
        @mdo
        </td>
        </tr>
        <tr>
        <td>
        2
        </td>
        <td>
        Jacob
        </td>
        <td>
        Thornton
        </td>
        <td>
        @fat
        </td>
        </tr>
        <tr>
        <td>
        3
        </td>
        <td>
        Larry
        </td>
        <td>
        the Bird
        </td>
        <td>
        @twitter
        </td>
        </tr>
        </tbody>
        </table>