How to solve the problem of repeating css on the border of a table line, and css on the border

How to solve the problem of repeating css on the border of a table line, and css on the border

1. The border of td overlaps with the border of table

. Table {border-left: 1px solid # dedede; border-top: 1px solid # dedede ;}

. Td {border-right: 1px solid # dedede; border-bottom: 1px solid # dedede ;}

The table only uses the left and top borders. Each td only has the right and bottom borders. The result is that the Left and top borders of the entire table are continuous solid lines, the right and bottom borders continue the border of td, so they are intermittent.

Solution:

. Table {border: 1px solid # dedede; border-collapse: collapse ;}

. Td {border: 1px solid # dedede;} the orange font is the key, and the border settings do not need to be divided between upper and lower sides. If they overlap, one will overwrite the other.

In firefox: the border of td overwrites table, and the border of table in IE overwrites td. Here, the border color is the same, so it doesn't matter.

Table Line FAQ:

1. Overlapping table borders with table cell lines. [Border-collapse: collapse solution]

2. The nested table overlaps with the edge of the nested table. [Using border-top | left | right | bottom]

3. mismatch between nested tables and nested tables. [Using table-layout: fixed; solution]

4. border-collapse has two attributes: separate and collapse.

Separate is the default attribute, and the table border has a gap of 1 px by default. In the era of table formatting, we set the background color of the table. We used it to squeeze out the outer border of the Forum;

Collapse is to remove the gap between the table border, so that when assigning values to the td border of the table, there will be no dual-box.

Demo: no two-line table with the collapse Attribute Set