Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Chapter 4: Bootstrap Tables

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 323
    Comment on it

    In Bootstrap table has a little padding and horizontal dividers. These tables are very clean and padding value is 8px with 1.4 line-height and vertical-align is top.

    To make a table within bootstrap you have to add .table class and this is called Basic table.

    <table class = "table">
       <thead>
          <tr>
             <th>City</th>
             <th>Pincode</th>
          </tr>
       </thead>
       
       <tbody>
          <tr>
             <td>Dhradun</td>
             <td>248001</td>
          </tr>
       </tbody>
    </table>

    With the basic table here is few more table classes in bootstrap

     

    Striped table -

    To use it you need to add a .table-striped class with .table class. This shows your table row in 2 different color means some even number of table row will white and odd number row will light gray color.

    <table class = "table table-striped">
       <thead>
          <tr>
             <th>City</th>
             <th>Pincode</th>
          </tr>
       </thead>
       
       <tbody>
          <tr>
             <td>Bangalore</td>
             <td>560001</td>
          </tr>
          
          <tr>         
             <td>Mumbai</td>
             <td>400003</td>
          </tr>
       </tbody>
    </table>

     

    Bordered table -

    By adding a .table-bordered class with .table class, In your table column get a border vertically border.

    <table class = "table table-bordered">
       <thead>
          <tr>
             <th>City</th>
             <th>Pincode</th>
          </tr>
       </thead>
       
       <tbody>
          <tr>
             <td>Bangalore</td>
             <td>560001</td>
          </tr>
          
          <tr>         
             <td>Mumbai</td>
             <td>400003</td>
          </tr>
       </tbody>
    </table>

     

    Hover Table -

    Using .table-hover class you will get cursor hovers pointer) on each row with gray background color on hover.

    <table class = "table table-hover">
       <thead>
          <tr>
             <th>City</th>
             <th>Pincode</th>
          </tr>
       </thead>
       
       <tbody>
          <tr>
             <td>Bangalore</td>
             <td>560001</td>
          </tr>
          
          <tr>         
             <td>Mumbai</td>
             <td>400003</td>
          </tr>
       </tbody>
    </table>

     

    Responsive Table -

    If you want to make your table responsive, for it you need to wrap the table in .table-responsive named class div. This will make a horizontal scroll under 768px view port.

    <div class = "table-responsive">
        <table class = "table table-hover">
           <thead>
              <tr>
                 <th>City</th>
                 <th>Pincode</th>
              </tr>
           </thead>
           
           <tbody>
              <tr>
                 <td>Bangalore</td>
                 <td>560001</td>
              </tr>
              
              <tr>         
                 <td>Mumbai</td>
                 <td>400003</td>
              </tr>
           </tbody>
        </table>
    </div>

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: