Small issues encountered in CSS styles

CSS styles have always been my weakness, and even the most basic styles won't be tuned. Try to learn the design of tables and lines, and paste the problems and solutions to them!

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]