• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 914
  • Last Modified:

How to make gridview cells look exactly like excel cells

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
Epitel0920
Asked:
Epitel0920
1 Solution
 
ChetOS82Commented:
Try setting GridLines="None"
0
 
Epitel0920Author Commented:
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
 
mr_nadgerCommented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
mr_nadgerCommented:
and change the grid's cssclass to detGrid :)
0
 
Epitel0920Author Commented:
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
 
Bob LearnedCommented:
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
 
mr_nadgerCommented:
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
 
mr_nadgerCommented:
in the .td section add
border:none;
0
 
Epitel0920Author Commented:
Thank you for your help. Your suggestion was very close to what I needed
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now