Home > Developer > Web Develop
Disclaimer: Web front-end learning notes, welcome to the great God guidance. Contact qq:1522025433.
Sometimes we have to define a separate style for a column of a table, and it's natural to think of the <colgroup> and <col> tags used in the <table> tab of the table to group the columns.
Let's look at an example:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>For column grouping, defining an issue with invalid CSS styles</title><styletype= "Text/css">Table{width:300px;Height:200px;Border-collapse:collapse;/*Merge cell borders*/ }TH,TD{Border:1px solid Red;/*Define cell borders*/ }</style></Head><Body><Table><!--groups the columns of a table, and the first column group spans two columns. Span is a property of Colgroup and Col, representing the number of columns across - <Colgroupclass= "Colgroup-1"><Colspan= "2" /></Colgroup><!--The second column group spans one column. / - <Colgroupclass= "Colgroup-2"><Colspan="" /></Colgroup> <tbody> <TR> <th>Table header</th> <th>Table header</th> <th>Table header</th> </TR> <TR> <TD>Cell</TD> <TD>Cell</TD> <TD>Cell</TD> </TR> <TR> <TD>Cell</TD> <TD>Cell</TD> <TD>Cell</TD> </TR> </tbody></Table></Body></HTML>
In the example above we have divided the table into two column groups, and we have a look at the browser effect that does not define the style for the column group:
The table header is centered by default. The cell is left-aligned by default!
Below, we have the following presentation style for the column group into the Day Sword:
Css:
{ text-align: right; }Defines the right alignment of text for column Group 1 (that is, the first two columns);
See if there is any effect:
Obviously, not as we imagined right alignment (Google, Firefox, ie are invalid);
We're going to see if the width is working, to avoid the impact of the test, we first remove the total width of the table (just remove it when testing the width, restore when the background color is tested below), and modify
{ /*width:300px; table width removed */ height: 200px; Border-collapse: collapse; /* Merge cell borders */ }First look at the effect of a browser:
Now let's add the width to column group 1.
CSS to fix the location of the code:
{ width: 150px; }Firefox, IE browser effect (Google little response):
At first glance, it seems to work, but after my measurements found that the width of the column group 1 is not 150px, but 300px; it appears that in Firefox, the width of each column in the column group is resolved to: 150px (self-thinking, guessing);
At this point it seems that the width is not effective. Height is also a little effect (has been tested), attached to the picture;
Let's look at the background color again.
{ background: pink; }Browser effects:
This time in the big browser The effect is the same, all get the correct rendering;
The above example can be summarized as: Define the style on the column group, text-align, width, hieght, etc. are invalid, only the background color is valid ;
After searching the Internet, the reasons are:
It is an old question to define a style that is not valid directly on Col. In fact, the align attribute on the col defined by HTML4 has never been well supported on modern browsers (ie supported only before the time of the CSS ERA), because this design cannot be implemented in the CSS1, 2, or 3 mechanisms.
According to the CSS model, the CSS style values on an element either come from matching their own rules or from the rules that match the ancestor elements and are obtained through inheritance. So the text-align of a cell (td/th) is either from the rules that match td/th, or from the ancestor elements such as tr,tbody,table. And Col/colgroup cannot be its ancestral element.
So although this requirement was requested by the developer for more than 10 years, it was never satisfied. Finally, it is necessary to update the CSS specification to create new combinator and pseudo-classes to implement .
Let's talk about your needs:
Table elements should be used in real tables, so-called real tables are two-dimensional data tables. Judging from your needs, it doesn't look like a real data sheet. It is therefore not recommended to use table elements.
Second, you can actually use Nth-child to achieve the effect you want.
Workaround for the above problem: However, we can use the pseudo-class selector (E:nth-child (n) or E:nth-of-type (n) in CSS3 to achieve the desired effect. (For details, see CSS3 Reference Manual Entry) we can use the following CSS style to achieve the right alignment of the first two columns of text, and the background color changes:/* The delegate means to select the parent element tr under the first th, the second th, the first TD, the second TD */ {text-align: right; Background: green; }For each major browser:
This method can not only be used for text alignment, background color, basically all of the CSS properties, can be well reflected (but the table cell TD does not support the margin property, The use of the cellspacing attribute can be used instead of having to determine whether the cells are independent of each other and cannot be defined border-collapse:collapse, but the CSS defines the border-spacing, the ability to separate the gaps of the cells, to include a value or two values , when you define a value, you define cell row spacing and column spacing for that value, and we recommend using CSS to define it, but cellpading can use the Padding property entirely instead to define the padding for the cell. For details, please refer to Css88 's CSS3 production test manual;
Final Summary:
"Colgroup" and "col" the two tags have serious browser compatibility issues, in Chrome, FireFox, Safari and other browsers only support the background color, width, and other few style attributes, so it is recommended not to use . You can use the CSS3 pseudo-class selector as mentioned in the article to achieve the desired effect.
For column grouping, defining an issue with invalid CSS styles
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
