Style control of the table header and row in the gridview

Source: Internet
Author: User

Based on the experience of the DataGrid, you can define a style in the style sheet and specify the cssclass of the header, row, and interval rows to get the desired effect. Later, after the gridview took over the DataGrid, it was found that there were always some inlistening places, and it was solved by setting the field attribute. Today, this problem is bothering me again. Just these days I have been very interested in exploring details, and it is really hard to help.


Originally, when the gridview generates HTML, the header corresponds to the th mark, and the row corresponds to the TD mark. For th, the default style is center bold. For TD, the default style is left normal. Even if you define and apply the style: Text-align: Left; In headerstyle, the header is still centered. This is because the style is applied to tr When HTML is generated, for example, <tr class = 'gridhead'> <TH> </Th> </tr>, the Header style you applied in this way cannot take effect.


If you have defined: TR {text-align: Left} in the style sheet, you can display the header to the left, but if you want to center some columns, the definition of horizontalalign = "center" is invalid.


After finding out the cause of the problem, you can flexibly grasp the problem based on the actual application. For example, if you want to change the default display of the header to the left, you can define Th {text-align: Left;} in the style sheet. If some columns need to be centered, you can define a class, for example. mycenter {text-algin: center;}, set



Please note that the gridhead style applied to the Black tag is added to the <tr> tag after HTML is generated, and the green tag can take effect.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.