Responsive Grid View CSS

Styling Grid View

In This article i am going to tell you how to write beautiful Grid view CSS, Here i am providing the CSS of Grid View.. Just Put Your Grid View inside div which class (gv)

<div class=”gv”> Grid View Here </div>

Once you put grid view inside gv class its become automatically add scroller when page overflow.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Untitled Page</title>
</head>
<body>
 <form id="form1" runat="server">
 <div class="gv">
 <asp:GridView ID="Gridview1" runat="server" CssClass="mygridstyle">
 </asp:GridView>
 </div>
 </form>
</body>
</html>

CSS

<style type="text/css">

  .gv
  {
	  overflow-x: scroll;
    overflow-y: hidden;
  }

   .mygridstyle 
   {
	   font-family:Verdana, Geneva, sans-serif;
   }
   
   .mygridstyle th
   {
	   background-color:#d1105d;
	   text-align:center;
	   border-bottom:1px solid #a30c48;
	   color:#f2f2f2;
	   font-size:13px;
   }
   
   .mygridstyle td
   {
	   background-color:#ff9fc5;
	   text-align:center;
	   border-bottom:1px solid #ba0f54;
	   color:#000;
	   font-size:12px;
	   padding-left:10px;
	   padding-right:10px;
   }
   
</style>
This is Responsive View in Bottom Scroller Appear
Desktop View

Leave a Reply

Your email address will not be published. Required fields are marked *