Post
Ask Question

Creating the Responsive GridView / Table Without Using BootStrap

To create responsive gridview or Table we required onyCss file no js file is reuired,

Css Code for this is as follow,

  1. .EU_TableScroll  
  2. {  
  3.     max - height: 275 px;  
  4.     overflow: auto;  
  5.     border: 1 px solid# ccc;  
  6. }  
  7. .EU_DataTable  
  8. {  
  9.     border - collapse: collapse;  
  10.     width: 100 % ;  
  11. }  
  12. .EU_DataTable tr th  
  13. {  
  14.     background - color: #3c454f;  
  15. color: # ffffff;  
  16.     padding: 10 px 5 px 10 px 5 px;  
  17.     border: 1 px solid# cccccc;  
  18.     font - family: Arial, Helvetica, sans - serif;  
  19.     font - size: 12 px;  
  20.     font - weight: normal;  
  21.     text - transform: capitalize;  
  22. }  
  23. .EU_DataTable tr: nth - child(2 n + 2)  
  24. {  
  25.     background - color: #f3f4f5;  
  26. }  
  27.   
  28. .EU_DataTable tr: nth - child(2 n + 1) td  
  29. {  
  30.         background - color: #d6dadf;  
  31.         color: #454545;  
  32. }  
  33. .EU_DataTable tr td  
  34. {  
  35. padding: 5px 10px 5px 10px;  
  36. color: # 454545;  
  37.         font - family: Arial, Helvetica, sans - serif;  
  38.         font - size: 11 px;  
  39.         border: 1 px solid# cccccc;  
  40.         vertical - align: middle;  
  41.     }  
  42.     .EU_DataTable tr td: first - child  
  43.     {  
  44.         text - align: center;  
  45.     }    
Then create the Div with class=”EU_TableScroll”
I.e.
  1. <divclass="EU_TableScroll"id="showData"style="display: block">  
  2. </div>  
Then in table class or in Gridview Class write.

In Gridview just write CSSClass=”EU_DataTable” full code for design view will be,

Default.aspx
  1. <divclass="EU_TableScroll" id="showData" style="display: block">  
  2.     <asp:GridViewID="GridView1" runat="server" CssClass="EU_DataTable" AllowPaging="true" PageSize="7">  
  3.         </asp:GridView>  
  4.         </div>  
Output:

output

With Normal view.

Output:

Output after reducing the size of browser.

browser