codescracker


css

CSS Collapse Table Border



« Previous Tutorial Next Tutorial »


The border-collapse Property

The border-collapse property allows you to define a way in which a border should be displayed around a table cell.

To display the border of your table in different styles, you need to set the appropriate values of the border-collapse property.

CSS border-collapse Property Values

The following table shows the possible values of the border-collapse property :

Value Description
collapse Sets a common border to all the cells of a table
separate Sets a separate border for each cell of a table
inherit Inherits the value of the border-collapse property from the parent element

CSS border-collapse Property Syntax

The following syntax shows an example of applying the border-collapse property in a table :

table {
border-collapse: separate; }

In the preceding syntax, the value of the border-collapse property is set to separate. This allows you to set different borders for all the cells of a table.

CSS Table border-collapse Example

Here is an example, shows how to collapse the border of the table using CSS border-collapse property:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 2px solid red;
}
table{border-collapse:collapse;}
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Adress</th>
  </tr>
  <tr>
    <td>Awanish</td>
    <td>New Delhi</td>
  </tr>
  <tr>
    <td>Harshit</td>
    <td>Mumbai</td>
  </tr>
</table>

</body>
</html>

It will display the following result:

collapse table border

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test