?
Solved

How to make gridview cells look exactly like excel cells

Posted on 2010-11-18
11
Medium Priority
?
913 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 7

Expert Comment

by:mr_nadger
ID: 34172107
and change the grid's cssclass to detGrid :)
0
 
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 2000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…

650 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