CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS border-color attribute CSS border-bottom-width attribute

CSS border-Usage and examples of collapse property

border-The collapse CSS property specifies whether the cell borders of the table are collapsed into a single border or separated normally.

There are two different models that can be set on CSS table cells.

Separated border model

In this model, each table cell has a separate border.

border-spacingThe distance between the boundaries of adjacent cells given by the property.

Note:In the separated border model, only cells (and the table itself) can have borders; rows, columns, row groups, and column groups cannot.

Overlapping border model

Adjacent table cells share borders in the collapsed border model.

Note:In the collapsed border model, you can specify the borders for the entire or partial borders of cells, rows, row groups, columns, and column groups that enclose the cell.

border-The collapse attribute selects the border model of the table. The value separate selects the separated border model. The value collapse selects the collapsed border model.

The following table provides usage instructions and version history of this attribute, as well as its usage syntax in JavaScript scripts.

Default value:	Separate
Applies to:	ThisTableand inline list elements
Inheritance:	Yes
Animatable:	No.See Animation attribute.
Version:	CSS 2,3
JavaScript syntax:	object object.style.borderCollapse="collapse"

border-Syntax of collapse usage

The syntax of this attribute is as follows:

border-collapse: separate | collapse | initial | inherit

The following examples demonstrate how to use border-collapse attribute.

Example

　　table {
　　　border-collapse: collapse;
　　}
　　th, td {
　　　border:　1px solid black;
　　}

Test to see‹/›

Attribute value

The following table describes the value of this attribute.

Value	Description
separate	Select the separated border model. This is the default value.
collapse	Select the collapsed border model.border-spacingandempty-cellsThe attribute will be ignored.
initial	Set this attribute to its default value.
inherit	If specified, the associated elements adopt the border of their parent element-collapse attribute values.

Browser compatibility

border-Browser compatibility of the collapse attribute, the numbers in the following table represent the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

	Firefox 1+ Google Chrome1+ Internet Explorer 5+ Apple Safari 1.2+ Opera 4+

Warning: useborder-collapseWhen specifying an attribute, always use a valid<!DOCTYPE>otherwise, unexpected results may occur.

See tutorial:CSS Border,CSS3 Border.

Table-related attributes:border-spacing,empty-cells,table-layout.