Home > Article > Web Front-end > How to use css border-collapse property

How to use css border-collapse property

青灯夜游Original: 2019-05-30 09:34:054192browse

The border-collapse attribute is used for table elements and can be used to set the two borders of the table to merge into a single border. All major browsers support the border-collapse attribute.

How to use the css border-collapse property?

The border-collapse property sets whether the table's borders are collapsed into a single border, or displayed separately as in standard HTML.

Syntax:

border-collapse: separate|collapse|inherit;

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.

● Inherit: Specifies that the value of the border-collapse attribute should be inherited from the parent element.

Note: All major browsers support the border-collapse attribute. The attribute value "inherit" is not supported in any version of Internet Explorer (including IE8). If !DOCTYPE is not specified, border-collapse may produce unexpected results.

css border-collapse property example

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"> 
<style type="text/css">
table{
  border-collapse:collapse;
}
table, td, th{
  border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Bill</td>
<td>20</td>
</tr>
<tr>
<td>Steven</td>
<td>25</td>
</tr>
</table>
</body>
</html>

Rendering:

How to use css border-collapse property

The above is the detailed content of How to use css border-collapse property. For more information, please follow other related articles on the PHP Chinese website!

css html 继承 border

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use css transform attributeNext article：How to use css transform attribute

See more

How to use css border-collapse property

Related articles