Solution to table line border duplication css_html/css_WEB-ITnose

1. The border of td overlaps 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;}

table only uses the left border and the top border, and each td only uses the right border and the bottom border, The effect is that the left and top borders of the entire table are continuous solid lines, and the right and bottom borders are borders that continue 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 into top, bottom, left and right. If they overlap, one will cover the other

In firefox: the border of td covers the table, and the border of table in IE covers the border of td. The border color here is the same, it doesn’t matter

Table line FAQ:

1. Table Overlap of border and table cell lines. [Use border-collapse:collapse to solve]

2. The problem of overlapping edges of nested tables and nested tables. [Use border-top|left|right|bottom to solve]

3. The problem of nested tables and nested tables being misaligned. [Use table-layout: fixed; to solve]

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

separate is the default attribute. The table border has a gap of 1px by default. In the era of table layout, we set the table background color. We used it to squeeze out the outer border of the block;

collapse, It is to remove the gap between the table borders, so that no double lines will be generated when assigning values ​​to the td border of the table.

Demo: Two-line table without collapse attribute set