试图在此gridview中强调headertext

时间:2014-10-20 16:23:58

标签: c# css asp.net gridview

我试图为整个标题文字加下划线,使其看起来像下面的图片(标记为"试图让它看起来像")。但它不会在整个标题文本中带有一致的下划线。谢谢你的帮助。

图片的一部分说明:"试图让它看起来像"是我想要的样子 图片的一部分说明:"目前看起来像#34;是它目前的样子。

代码附在

下面

enter image description here

  <asp:GridView runat="server" ID="grdvwDepositTransaction"
                AutoGenerateColumns="false" DataKeyNames="Status"
                OnRowCommand="grdvwDepositTransaction_RowCommand" ShowHeaderWhenEmpty="true" OnRowDataBound="grd_RowDataBound"
                CssClass="grid">

               <Columns>
                  <asp:TemplateField>
              <ItemTemplate>

              </ItemTemplate>
               </asp:TemplateField>

                  <asp:BoundField DataField="DepositEntry.cardNumber" HeaderText="Card Number" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.accountNumber" HeaderText="Account Number" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.firstName" HeaderText="Customer Name" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.transactionDateTime" HeaderText="Transaction Date/Time" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.cashAmount" HeaderText="Cash Amount" ItemStyle-CssClass="mediumColumn columnCenter" />
                  <asp:BoundField DataField="DepositEntry.depositAmount" HeaderText="Envelope Deposit Amount" ItemStyle-CssClass="mediumColumn columnCenter" />
               </Columns>
                    <EmptyDataTemplate>
                        <br />
                         <br /><br />
                        <span style="font-weight: bold; text-anchor:middle;">No Transactions have been entered</span>
                            </EmptyDataTemplate>                   
                           </asp:GridView>









  <table class="grid" cellspacing="0" rules="all" border="1"      id="MainContent_grdvwDepositTransaction" style="border-collapse:collapse;">
    <tr style="text-decoration:underline;">
        <th scope="col">&nbsp;</th><th scope="col">Card Number</th><th scope="col">Account Number</th><th scope="col">Customer Name</th><th scope="col">Transaction Date/Time</th><th scope="col">Cash Amount</th><th scope="col">Envelope Deposit Amount</th>
    </tr><tr>
        <td colspan="7">
                        <br />
                         <br />
                        <br />
                        <span style="font-weight: bold; text-anchor:middle;">No Transactions have been entered</span>
                    </td>
    </tr>
</table>


               <br />

                </div>

          </div>

3 个答案:

答案 0 :(得分:1)

此CSS会为tr tablegrid的第一个table.grid tr:first-of-type { border-bottom: 5px solid black; } 提供底部边框:

{{1}}

答案 1 :(得分:1)

我同意,你可以用CSS做到。但如果你有兴趣从服务器端以编程方式进行,我可以帮助你。

  1. 定义row_databound事件,如下所示。 OnRowDataBound="gvw_RowDataBound"
  2. 然后在服务器端,如果找到header row
  3. 接下来执行以下操作。

    • 创建一个额外的行
    • 设置colspan = cells count
    • 添加必需的html,在这种情况下&lt; hr /&gt;
    • 然后将额外的行追加到标题行。

    完整代码。

    protected void gvw_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            GridViewRow extraRow = new GridViewRow(-1, -1, DataControlRowType.Header, DataControlRowState.Normal);
            TableCell tc = new DataControlFieldCell(((DataControlFieldCell)e.Row.Cells[0]).ContainingField);
            tc.Text = "<hr/>";
            tc.ColumnSpan = e.Row.Cells.Count;
            extraRow.Cells.Add(tc);
            e.Row.Parent.Controls.AddAt(1, extraRow);
        }
    }
    

    消息来源 - http://forums.asp.net/p/1534978/3725419.aspx#3725419

    希望,这会有所帮助,以其他方式(如果有人想添加任何自定义HTML)!

答案 2 :(得分:0)

在您的列标记添加之前:

<HeaderStyle CssClass="HeaderTemplate" />

在你的CSS代码上添加:

.HeaderTemplate {
    border-bottom: 2px solid black;
}