Solved

How to make gridview cells look exactly like excel cells

Posted on 2010-11-18
11
900 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, just open a new email message. In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…

813 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

11 Experts available now in Live!

Get 1:1 Help Now