Gridview column color doesnt fill entire box
I have a gridview with certain boxes that are highlighted in green. These boxes should fill the entire box, but I can't seem to trash this 1px border around the edges. I'm using 开发者_StackOverflowIE7, but FF does it too.
Rendered html
<!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><title>
</title><link href="Style/StyleSheet.css" rel="stylesheet" type="text/css" /><link href="App_Themes/Contoso/Style.css" type="text/css" rel="stylesheet" /></head>
<body>
<form name="form1" method="post" action="GridViewColoring.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJODIyMTgxMzQxZBgBBQh0ZXN0R3JpZA88KwAMAQgCAWR6Qz5BuXEoalr4HjsTfYqqKPrdwd2ICIXpeNacwdi46w==" />
</div>
<div>
<div>
<table class="cssTable" cellspacing="0" rules="all" border="1" id="testGrid" style="border-collapse:collapse;">
<tr>
<th scope="col">Description</th><th scope="col">Serial#</th>
</tr><tr style="background-color:Yellow;">
<td class="NoMargin NoPadding" style="font-size:Smaller;">
<span id="testGrid_ctl02_descriptionLbl">Some desc 1/25/2011 9:51:27 AM</span>
</td><td style="font-size:Smaller;">
<span id="testGrid_ctl02_serialNumberLbl" class="NoMargin NoPadding MaxHeightAndWidth NoBorder" style="display:inline-block;height:100%;width:100%;">0</span>
</td>
</tr><tr style="background-color:Yellow;">
<td class="NoMargin NoPadding" style="font-size:Smaller;">
<span id="testGrid_ctl03_descriptionLbl">Some desc 1/25/2011 9:51:27 AM</span>
</td><td style="font-size:Smaller;">
<span id="testGrid_ctl03_serialNumberLbl" class="NoMargin NoPadding MaxHeightAndWidth NoBorder" style="display:inline-block;background-color:#CCFFCC;height:100%;width:100%;">1000</span>
</td>
</tr><tr style="background-color:Yellow;">
<td class="NoMargin NoPadding" style="font-size:Smaller;">
<span id="testGrid_ctl04_descriptionLbl">Some desc 1/25/2011 9:51:27 AM</span>
</td><td style="font-size:Smaller;">
<span id="testGrid_ctl04_serialNumberLbl" class="NoMargin NoPadding MaxHeightAndWidth NoBorder" style="display:inline-block;background-color:#CCFFCC;height:100%;width:100%;">2000</span>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
test case
CSSbody {
}
.NoMargin
{
margin:0 0 0 0;
}
.NoPadding
{
padding:0 0 0 0;
}
.BgColor
{
background-color:Aqua;
}
.MaxHeightAndWidth
{
height:100%;
width:100%;
}
.NoBorder
{
border:0px;
}
ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewColoring.aspx.cs" Inherits="WebApplication1.GridViewColoring" %>
<!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></title>
<link href="Style/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView id="testGrid" runat="server" CssClass="cssTable"
AutoGenerateColumns="False"
OnRowDataBound="SetStatusColors" >
<Columns>
<asp:TemplateField HeaderText="Description" SortExpression="description" ItemStyle-CssClass="NoMargin NoPadding">
<ItemTemplate>
<asp:Label ID="descriptionLbl" runat="server" Text='<%# Bind("description") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Font-Size="Smaller" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Serial#" SortExpression="serial">
<ItemTemplate>
<asp:Label ID="serialNumberLbl" runat="server" Text='<%# Bind("serial") %>' CssClass="NoMargin NoPadding MaxHeightAndWidth NoBorder" Height="100%" Width="100%"></asp:Label>
</ItemTemplate>
<ItemStyle Font-Size="Smaller" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C# backend
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace WebApplication1
{
public partial class GridViewColoring : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
testGrid.DataSource = MakeTable();
testGrid.DataBind();
}
protected void SetStatusColors(object sender, GridViewRowEventArgs e)
{
for (int i = 0; i < testGrid.Rows.Count; i++)
{
string serialNumber = ((Label)testGrid.Rows[i].FindControl("serialNumberLbl")).Text;
if (serialNumber != "0")
{
//GREEN HIGHLIGHTS
((Label)testGrid.Rows[i].FindControl("serialNumberLbl")).BackColor = System.Drawing.Color.FromArgb(204, 255, 204);
}
testGrid.Rows[i].BackColor = System.Drawing.Color.Yellow;
}
}
//mock db
private DataSet MakeTable()
{
var table = new DataTable("ParentTable");
DataColumn column;
DataRow row;
// Create new DataColumn, set DataType,
// ColumnName and add to DataTable.
column = new DataColumn();
column.DataType = System.Type.GetType("System.Int32");
column.ColumnName = "serial";
column.ReadOnly = true;
// Add the Column to the DataColumnCollection.
table.Columns.Add(column);
//// Create second column.
column = new DataColumn();
column.DataType = System.Type.GetType("System.String");
column.ColumnName = "description";
column.AutoIncrement = false;
column.Caption = "Description";
column.ReadOnly = false;
column.Unique = false;
// Add the column to the table.
table.Columns.Add(column);
// Instantiate the DataSet variable.
var dataSet = new DataSet();
// Add the new DataTable to the DataSet.
dataSet.Tables.Add(table);
// Create three new DataRow objects and add
// them to the DataTable
for (int i = 0; i <= 2; i++)
{
row = table.NewRow();
row["serial"] = i * 1000;
row["description"] = "Some desc " + DateTime.Now;
table.Rows.Add(row);
}
return dataSet;
}
}
}
Update
Changed the Serial# template's itemstyle and it fixed the problem. I have no idea why, but thanks to your tips, I was able to reduce the problem down enough to try it:<ItemStyle Font-Size="Smaller" CssClass="NoMargin NoPadding" />
Try setting border-collapse: collapse; on the cssTable css class.
Okay I was able to get it working. I took the css classes off of the first template item and created the following css.
table.cssTable
{
border-collapse: collapse;
}
table.cssTable tr td
{
background: Yellow;
font-size:Smaller;
margin: 0;
padding: 0;
}
By the way, you should be able to get rid of the ItemStyle with font-size as well with this CSS.
I've created a fiddle but can't really see the problem I'm afraid - http://jsfiddle.net/5rBYb/1/
You might want to try adding this to your CSS though, which will set the borders to a single pixel (which I suspect is what's causing your problem).
table, th, td { border: 1px solid #000; }
Just change it to border: 0 if you want to hide borders.
加载中,请稍侯......
精彩评论