Saturday, 18 April 2015

Bootstrap Basic Table



<table> Classes:
Use the classes below to style any table: 
Class
Description
.table
Adds basic styling (light padding and only horizontal dividers) to any <table>
.table-striped
Adds zebra-striping to any table row within <tbody> (not available in IE8)
.table-bordered
Adds border on all sides of the table and cells
.table-hover
Enables a hover state on table rows within a <tbody>
.table-condensed
Makes table more compact by cutting cell padding in half

Contextual Classes

Contextual classes can be used to color table rows (<tr>) or table cells (<td>). The contextual classes that can be used are:
Class
Description
.active
Applies the hover color to the table row or table cell
.success
Indicates a successful or positive action
.info
Indicates a neutral informative change or action
.warning
Indicates a warning that might need attention
.danger
Indicates a dangerous or potentially negative action

<div class="container">
  <h2>Contextual Classes</h2>
  <p>Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.</p>           
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>Ravi</td>
        <td>Gupta</td>
        <td>ravi@example.com</td>
      </tr>
      <tr class="danger">
        <td>Sushil</td>
        <td>Kumar</td>
        <td>sushil@example.com</td>
      </tr>
      <tr class="info">
        <td>Atul</td>
        <td>Sinha</td>
        <td>atul@example.com</td>
      </tr>
    </tbody>
  </table>
</div>





No comments:

Post a Comment