How to remove duplicate borders of table in css

In CSS, you can use the border-collapse attribute to remove repeated borders in the table. This attribute can set whether the table border is collapsed into a single border or separated. You only need to set the value to collapse to remove the overlap. The borders are merged together to form a border, achieving the effect of a single-line border.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Overlap problem after setting borders in table table

table{
 border-spacing: 0;
 border-collapse: collapse;
}
table td {          
 border: 1px solid #000;
 padding: 20px 30px;
}

In the table table, when we add borders and remove the margins of each cell, the form There will be a problem of overlapping borders, making the border line thicker. At this time, we can set border-collapse: collapse to set the border. It merges the overlapping borders together and becomes a border to achieve a single line. Border effect.

Rendering:

Description:

border-collapse property sets whether the borders of the table are merged into A single border, or separate displays as in standard HTML.

Attribute value:

• separate Default value. The borders will be separated. The border-spacing and empty-cells properties are not ignored.​

• #collapse If possible, the borders will be merged into a single border. The border-spacing and empty-cells properties are ignored.

Related introduction:

border is the abbreviation of the border attribute.

CSS border property is used to specify the style, width and color of the element border.

The properties that can be set are (in order): border-width, border-style and border-color.

You can also set only one value. For example, border: #FF0000; is correct, and other values ​​will be set to the initial values ​​of the corresponding attributes.

Syntax format

You can use one, two or three values ​​listed below to specify the border attribute. The order of the values ​​does not matter:

/* 边框样式 */
border: solid;
/* 边框宽度 | 边框样式 */
border: 2px dotted;
/* 边框样式 | 边框颜色 */
border: outset #f33;
/* 边框宽度 | 边框样式 | 边框颜色 */
border: medium dashed green;
/* 全局值 */
border: inherit;
border: initial;
border: unset;

Note: If the border The style is undefined, it will not be visible. This is because styles default to none.

Related recommendations: "css video tutorial"

The above is the detailed content of How to remove duplicate borders of table in css. For more information, please follow other related articles on the PHP Chinese website!