How to remove border-collapse from the style attribute when the gridview is generated, and remove the border from the gridview

Source: Internet
Author: User

How to remove border-collapse from the style attribute when the gridview is generated, and remove the border from the gridview

When the gridview is used in vs2005, by default, the gridview control adds border-collapse: collapse to the style attribute in the generated html code;

Copy codeThe Code is as follows:
<Asp: GridView ID = "GridView1" runat = "server" BorderWidth = "0"> </asp: GridView>

The Code on the page after the bound data is run is:

<table cellspacing="0" rules="all" border="0" id="GridView1" style="border-width:0px;border-collapse:collapse;"><tr><th scope="col">id</th><th scope="col">name</th></tr><tr><td>1</td><td>1</td></tr><tr><td>2</td><td>2</td></tr></table>

The gridview control is automatically added with: border-collapse: collapse;

To remove the automatically added code, you only need to set CellSpacing = "-1". The added html code is

<table rules="all" border="0" id="GridView1" style="border-width:0px;"><tr><th scope="col">id</th><th scope="col">name</th></tr><tr><td>1</td><td>1</td></tr><tr><td>2</td><td>2</td></tr></table>

Add:

GridLines = "None" does not display cell borders
CellSpacing = "-1" remove border-collapse: collapse; style in the GridView style

Note: In the firefox browser, border merging causes some border lines to become thicker. GridLines = "None" can solve the problem.


How to remove the border of the GridVIew from the Analysis Client

Today, we will use the GridView to clear the waste code. This time we analyze the html generated from the client.
The specific problem is that the GridView has a border. Of course, it may be different in different browsers, that is, we want to remove the border of the GridView, so we don't have to worry about modifying the properties in the GridView first, let's take a look at the html code generated by the client. This is the table generated by the GridView.
<Table cellspacing = "0" rules = "all" border = "0" id = "ctl00_ContentPlaceHolder1_GvLatestNews" style = "border-style: None; border-collapse: collapse; "</table: the Key analysis is rules =" all ". This is the help document.
Sets or retrieves which dividing lines (inner borders) are displayed. // rules is used to set and retrieve the display of which separator line (inner border)
Syntax // Syntax
The syntax in HTML <table rules = sRule... // html is in the left-side format.
Scripting TABLE. rules [= sRule] // The syntax in the script is in the left-side format.
Possible Values // Possible property value sRuleString that specifies or distinct es one of the following values. // sRule is of the stable type, which is used to specify or accept several Values
AllBorders are displayed on all rows and columns. // the value of all indicates that the borders of all rows and columns are displayed.
ColsBorders are displayed between all table columns. // cols indicates that only the border of the columns in the table is displayed.
GroupsHorizontal borders are displayed between all tHead, tBody, and tFoot objects; // the border in the horizontal direction is displayed between all thead, tbody, and tFoot objects.
Vertical borders are displayed between all colGroup objects. // the border in the vertical direction is displayed between all colGroup objects.
NoneAll interior table borders are removed. // remove all table labels.
RowsHorizontal borders are displayed between all table rows. // the border on the horizontal direction is displayed between the plain table columns.

What is border-collapse: collapse; In the css attribute of html?

The table border is displayed as a separate border or separated as in standard HTML.
Reference: www.w3school.com.cn/css/pr_tab_border-collapse.asp

Related Article

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: info-contact@alibabacloud.com 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.