Tables

Standard Responsive Table

Usage : Ceate your table inside a div with class responsive-table and add class : table to the table tag.

Product Name	Product Description	Product Price
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$

<div class="responsive-table">
   <table class="table">
      <thead>
         <tr>
            <td>Product Name</td>
            <td>Product Description</td>
            <td>Product Price</td>
         </tr>
      </thead>
      <tr>
         <td>Lenovo 570e Black</td>
         <td>Description of product</td>
         <td>Price : 230$</td>
      </tr>
      <tr>
         <td>Lenovo 570e Black</td>
         <td>Description of product</td>
         <td>Price : 230$</td>
      </tr>
      <tr>
         <td>Lenovo 570e Black</td>
         <td>Description of product</td>
         <td>Price : 230$</td>
      </tr>
   </table>
</div>

Borderd Table

Usage : add class : table-borderd to the table tag.

Product Name	Product Description	Product Price
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$

<div class="responsive-table">
   <table class="table-borderd">
      <thead>
         <tr>
            <td>Product Name</td>
            <td>Product Description</td>
            <td>Product Price</td>
         </tr>
      </thead>
      <tr>
         <td>Lenovo 570e Black</td>
         <td>Description of product</td>
         <td>Price : 230$</td>
      </tr>
      <tr>
         <td>Lenovo 570e Black</td>
         <td>Description of product</td>
         <td>Price : 230$</td>
      </tr>
      <tr>
         <td>Lenovo 570e Black</td>
         <td>Description of product</td>
         <td>Price : 230$</td>
      </tr>
   </table>
</div>

Striped Table Rows

Usage : add class : striped to the table class element.

Product Name	Product Description	Product Price
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$

<div class="responsive-table">
   <table class="table striped">
      <thead>
         <tr>
            <td>Product Name</td>
            <td>Product Description</td>
            <td>Product Price</td>
         </tr>
      </thead>
      <tr>
         <td>Lenovo 570e Black</td>
         <td>Description of product</td>
         <td>Price : 230$</td>
      </tr>
      <tr>
         <td>Lenovo 570e Black</td>
         <td>Description of product</td>
         <td>Price : 230$</td>
      </tr>
      <tr>
         <td>Lenovo 570e Black</td>
         <td>Description of product</td>
         <td>Price : 230$</td>
      </tr>
   </table>
</div>

Colored Table Head

Usage : add class : dark-theme to the thead tag to inverse text color.

Product Name	Product Description	Product Price
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$

<div class="responsive-table">
   <table class="table">
   
      <thead class="primary-bg dark-theme">
         <tr>
            <td>Product Name</td>
            <td>Product Description</td>
            <td>Product Price</td>
         </tr>
      </thead>
	  
      <tr>
         <td>Lenovo 570e Black</td>
         <td>Description of product</td>
         <td>Price : 230$</td>
      </tr>
	  
   </table>
</div>

Dark Theme Table

Usage : add class : dark-theme to the table class element.

Product Name	Product Description	Product Price
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$
Lenovo 570e Black	Description of product	Price : 230$

<div class="responsive-table">
   <table class="table secondary-bg dark-theme">
      <thead class="primary-bg">
         <tr>
            <td>Product Name</td>
            <td>Product Description</td>
            <td>Product Price</td>
         </tr>
      </thead>
      <tr>
         <td>Lenovo 570e Black</td>
         <td>Description of product</td>
         <td>Price : 230$</td>
      </tr>
   </table>
</div>