如何将这个https://codepen.io/daveoncode/pen/lnombe表CSS应用到我的Gridview，因为我需要像这个链接上一样的网格。当我复制这个CSS并添加类名时，它不能正常工作，我只得到滚动，但错过了固定的页眉和页脚。如何在GridView中得到完整的处理并设置CSS，以及如何对页脚进行处理？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.wrapper {
width: 90%;
position: relative;
border: 1px solid #000;
background: #efefef;
overflow: hidden;
border-radius: 7px;
}
.containerGrid {
overflow-y: scroll;
height: 400px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
table {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
td + td {
border-left: 1px solid #fff;
}
td, th {
border-bottom: 1px solid #fff;
background: #ff6a00;
padding: 5px;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.thead tr th,
.tfoot tr td {
height: 0;
line-height: 0;
margin: 0;
padding-top: 0;
padding-bottom: 0;
border: none;
white-space: nowrap;
}
tbody tr th {
background-color: snow;
}
.thead tr th,
.tfoot td {
position: absolute;
color: #000000;
padding: 10px;
margin-left: -10px;
line-height: normal;
width: 100%;
z-index: 2;
text-align: left;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="wrapper">
<div class="containerGrid">
<asp:GridView ID="Gridview2" runat="server" ShowFooter="true"
AutoGenerateColumns="false">
<HeaderStyle CssClass="thead" />
<FooterStyle CssClass="tfoot" />
<Columns>
<asp:TemplateField HeaderText="Ministry">
<ItemTemplate>
<asp:Label ID="Ministry" runat="server" Text='<%#Eval("Ministry")%>' />
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtMinistry" runat="server" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Title">
<ItemTemplate>
<asp:Label ID="Title" runat="server" Text='<%#Eval("Title")%>' />
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtTitle" runat="server" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Criteria">
<ItemTemplate>
<asp:Label ID="Criteria" runat="server" Text='<%#Eval("Criteria")%>' />
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtTitle" runat="server" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
代码隐藏:
protected void Page_Load(object sender, EventArgs e)
{
var obj = new { Ministry = "Ministry 0", Title = "Title 0", Criteria = "Criteria 0" };
var objList = (new[] { obj }).ToList();
for (int i = 1; i < 30; i++)
{
objList.Add(new { Ministry = "Ministry " + i.ToString(), Title = "Title " + i.ToString(), Criteria = "Criteria " + i.ToString() });
}
Gridview2.DataSource = objList;
Gridview2.DataBind();
}
首先添加下面的代码。默认情况下，GridView不生成和元素。因此您的CSS将无法正常工作。<asp:GridView ID="Gridview2" runat="server" OnRowDataBound="GridView2_RowDataBound">
protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.TableSection = TableRowSection.TableHeader;
}
}
相关问题
