element table

Home > element 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-right"><strong>Total</strong></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Dummy Product Name  x 2</td>
    <td class="text-right">$86.00</td>
    </tr>
    <tr>
    <td>Dummy Product Name  x 1</td>
    <td class="text-right">$69.00</td>
    </tr>
    <tr>
    <td>Cart Subtotal</td>
    <td class="text-right">$155.00</td>
    </tr>
    <tr>
    <td>Shipping and Handing</td>
    <td class="text-right">$15.00</td>
    </tr>
    <tr>
    <td>Vat</td>
    <td class="text-right">$00.00</td>
    </tr>
    <tr>
    <td>Order Total</td>
    <td class="text-right">$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>