How does the table border Border-collapse:collapse after the border is set?

Source: Internet
Author: User
Encountered a border need to set the fillet, and then found that after setting the Border-collapse:collapse, border-radius:5px will not work, on various checks, found that this is the CSS itself, the two can not be mixed together to use. So we used the other way to realize the round corner of table.
But now I wonder how the border of table and the border of TD and TH are merged into a single border?
Similar to the place where the upper left corner of the table is at the intersection of the first th, are the borders of the table preserved after the border is merged, or is it a border of th? If we say that the left is the "th" border, then I set the Border-radius of the first th, why still no effect?

Laxatives-v-, just on the Friday group share in the time to say border-collapse priority, the world Wide world of the table on that section, there are instructions border-collapse:collapse conflict handling.

There are two detailed examples in the document, very intuitive.

Here I summarize: (premise Border-collapse:collapse)
1. Border-style = [Hidden|none]
Hidden has the highest priority, and when two borders produce aggregations, as long as any one of the hidden is set, the end result is no border; none is the lowest priority, as long as any one setting is none, and the other is the result.

Under normal circumstances, Border-style:hidden and Border-style:none are not showing the border, when the border-collapse:collapse when there is a difference.

2. In the case of Border-width inconsistency, the main border-width
3. Border-style≠[hidden|none] and border-width consistent case, in this order of precedence: ' Double ', ' solid ', ' dashed ', ' dotted ', ' ridge ', ' outset ', ' Groove ', ' inset '.
4. When the border is just a different color: It follows the DOM hierarchy, and the border style of the child element is superior to the border style of the parent element. [Cell > Row > Rowgroup > Table]; If the hierarchy is a sibling, the table is ltr, for example, left, top precedence.

However, it is particularly interesting that the specification does not specify the collapse logic at the corner corner, so it behaves differently under Chrome and Firefox.
Can be opened separately under Chrome and Firefox: Bqemea
Yes brother TD is just color inconsistent and then the left is chrome and the right is Firefox

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.