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. }
  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