Question

我有一个网格视图，其中某些框以绿色突出显示。这些盒子应该填满整个盒子，但我似乎无法将这个1px边框丢弃在边缘。我正在使用IE7，但FF也是这样做的。

GridViewSS

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

测试用例
的 CSS

body {
}
.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;
        }
    }
}

更新
更改了Serial＃template的itemstyle并修复了问题。我不知道为什么，但是由于你的提示，我能够将问题减少到足以尝试它：

<ItemStyle Font-Size="Smaller" CssClass="NoMargin NoPadding" />

Answer 1

尝试设置border-collapse：collapse;在cssTable css课上。

好的，我能够让它运转起来。我从第一个模板项中取出了css类，并创建了以下css。

table.cssTable
{
    border-collapse: collapse;
}

table.cssTable tr td
{
    background: Yellow;
    font-size:Smaller;
    margin: 0;
    padding: 0;
}

顺便说一下，你应该能够使用这个CSS去掉带有font-size的ItemStyle。

Answer 2

我创造了一个小提琴，但我不能真正看到我害怕的问题 - http://jsfiddle.net/5rBYb/1/

您可能想尝试将此添加到CSS中，这会将边框设置为单个像素（我怀疑这是导致您出现问题的原因）。

table, th, td { border: 1px solid #000; }

如果要隐藏边框，只需将其更改为border: 0。

Gridview列颜色不会填满整个框

2 个答案: