[英]Using CSS id selector to style Gridview control
I have an existing CSS file with these 2 id selectors:我有一个现有的 CSS 文件,其中包含以下 2 个 id 选择器:
#TableHead {
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight: bold;
color: #000000;
border-top-width: thin;
border-top-style: solid;
border-top-color: #A9AAAA;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #A9AAAA;
}
#TableDivs {
border-bottom-width: 1px;
font-size:11px;
border-bottom-style: dotted;
font-family:Arial, Helvetica, sans-serif;
border-bottom-color: #A9AAAA;
}
I need to use "TableHead" to style Gridview header and "TableDivs" to style the rest of the Gridview control. I need to use "TableHead" to style Gridview header and "TableDivs" to style the rest of the Gridview control. I am able to use TableDivs by enclosing the gridview in section.我可以通过在部分中包含 gridview 来使用 TableDivs。 How can I use TableHead to style the header?如何使用 TableHead 设置 header 的样式? Where should I specify id="TableHead"?我应该在哪里指定 id="TableHead"?
The rendered source code of Gridview after adding is: Gridview 添加后的渲染源代码为:
<div id="TableDivs">
<div>
<table cellspacing="0" rules="all" border="0" id="ctl00_Main_GridView1" style="border-width:0px;font-weight:normal;border-collapse:collapse;">
<tr>
<th align="left" scope="col">
<a href="javascript:__doPostBack('ctl00$Main$GridView1','Sort$FileName')">File Name</a>
</th>
<th align="left" scope="col"><a href="javascript:__doPostBack('ctl00$Main$GridView1','Sort$Description')">Description</a>
</th>
<th align="left" scope="col"><a href="javascript:__doPostBack('ctl00$Main$GridView1','Sort$GroupName')">Folder Name</a>
</th>
<th align="left" scope="col">
<a href="javascript:__doPostBack('ctl00$Main$GridView1','Sort$TimeAdded')">Date Added</a>
</th>
</tr>
<tr>
<td style="width:30%;">
<a id="ctl00_Main_GridView1_ctl02_btnDownload" href="javascript:__doPostBack('ctl00$Main$GridView1$ctl02$btnDownload','')">2.txt</a>
</td>
<td style="width:40%;">222222</td><td style="width:25%;">group11</td>
<td style="width:5%;">
<span id="ctl00_Main_GridView1_ctl02_lblDateAdded"></span>
</td>
</tr>
<tr>
...
</tr>
</table>
</div>
</div>
<asp:GridView HeaderStyle-CssClass="your_class" ></asp:GridView>
You should ideally use理想情况下,您应该使用
Gridview .table, Gridview .th, Gridview .tr, Gridview .tr
selectors.选择器。 This will help you select the gridview or all similar gridviews and give them a common look and feel.这将帮助您 select、gridview 或所有类似的网格视图,并为它们提供共同的外观和感觉。
It also allows CSS to do the styling instead of writing code in .NET and specifying the class.它还允许 CSS 进行样式设置,而不是在 .NET 中编写代码并指定 class。
<asp:GridView ID="gridId" runat="server" >
<HeaderStyle CssClass="TableHead" />
<RowStyle CssClass="TableDivs" />
</asp:GridView>
<asp:GridView ID="TableDivs" runat="server" >
use some js to get the parent of ths or just thead(if GridView can export thead), then add #TableHead to the element.
</asp:GridView>
Thanks everyone for the help.感谢大家的帮助。 Finally I had no choice but to modify all the css files and add new class selectors, because I had no way of using the id selectors.最后我别无选择,只能修改所有 css 文件并添加新的 class 选择器,因为我无法使用 id 选择器。 I used the new class selectors in GridView's HeaderStyle, RowStyle, PagerStyle cssclass attribute.我在 GridView 的 HeaderStyle、RowStyle、PagerStyle cssclass 属性中使用了新的 class 选择器。 It is working fine now.现在工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.