Solved

How to make gridview cells look exactly like excel cells

Posted on 2010-11-18
11
895 Views
Last Modified: 2012-05-10
Hello,
   I have a gridview with the following code. I want to make the cells look exactly like they do in Excel with no borders around them. Right now I have a small border at the top and the bottom of the cell and I was hopping you'd know how to get rid of it.
Thank you
Peter
<asp:Gridview ID="EditableGrid1" AutoGenerateColumns="False" runat="server" EnableInsert="False" SaveButtonID="" OnRowUpdating="EditableGridView1_RowUpdating" onrowdatabound="EditableGrid1_RowDataBound" CellPadding="0" CellSpacing="0" Width="100%">

<Columns>

   <asp:BoundField HeaderText="A" DataField="A" />

   <asp:BoundField HeaderText="B" DataField="B" />

   <asp:BoundField HeaderText="C" DataField="C" />

   <asp:BoundField HeaderText="D" DataField="D" />

   <asp:BoundField HeaderText="E" DataField="E" />

  </Columns>

</asp:Gridview>

Open in new window

0
Comment
Question by:Epitel0920
11 Comments
 
LVL 18

Expert Comment

by:ChetOS82
ID: 34168569
Try setting GridLines="None"
0
 
LVL 3

Author Comment

by:Epitel0920
ID: 34168664
Not exactly what I need, the border I am talking about is fatter then the gridlines and is on top of every cell and its still there even when the GridLines are not.
0
 
LVL 7

Expert Comment

by:mr_nadger
ID: 34172081
try CSS for gridviews, I've pasted an example of one format I use for displaying grids, you can make it very pretty or plain as sin, it's entirely up to you
.detGrid {    

    background-color: #fff;    

    border-collapse:collapse;   

    vertical-align:top; 

    font-size: 12px;

    font-family: Arial, Sans-Serif;

}   

.detGrid td {    

    padding: 2px;    

    border: solid 1px #c1c1c1;    

    color: #717171;   

    vertical-align:top; 

}   

.detGrid th {    

    color: White;    

    background: #5078B3 ;    

    font-size: 12px;

    font-family: Arial, Sans-Serif;

    text-align:center;    

}

Open in new window

0
 
LVL 7

Expert Comment

by:mr_nadger
ID: 34172107
and change the grid's cssclass to detGrid :)
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 3

Author Comment

by:Epitel0920
ID: 34191022
thats cool thanks... so which property do you have to edit to get rid of the cell border completely?
setting padding: 0px helps but does not completely eliminate the border.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 34234384
What browser are you using?  If you have Internet Explorer 8, there is a Developer Tools (F12) option that will let you see the styles applied to the grid elements.  You can selectively disable certain styles to see where the border is coming from.  
0
 
LVL 7

Expert Comment

by:mr_nadger
ID: 34237355
I think it was the .td section you need to look at for the cells, I'll have a play with the solution I used that CSS on and post an update if I get rid of the borders.
0
 
LVL 7

Accepted Solution

by:
mr_nadger earned 500 total points
ID: 34237379
in the .td section add
border:none;
0
 
LVL 3

Author Closing Comment

by:Epitel0920
ID: 34269039
Thank you for your help. Your suggestion was very close to what I needed
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article describes relatively difficult and non-obvious issues that are likely to arise when creating COM class in Visual Studio and deploying it by professional MSI-authoring tools. It is assumed that the reader is already familiar with the cla…
For those of you who don't follow the news, or just happen to live under rocks, Microsoft Research released a beta SDK (http://www.microsoft.com/en-us/download/details.aspx?id=27876) for the Xbox 360 Kinect. If you don't know what a Kinect is (http:…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now