Javascript Reference - HTML DOM Style borderCollapse Property

The borderCollapse property sets or gets whether to collapse the table border into a single border.

Browser Support


`borderCollapse`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the borderCollapse property:

var v = object.style.borderCollapse

Set the borderCollapse property:

object.style.borderCollapse=separate|collapse|initial|inherit

Property Values

Value	Description
separate	This is the Default. Draw separate borders for all table cell elements.
collapse	Do not drawn borders between table cell elements
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

Default Value:	separate
Return Value:	A string representing the border-collapse property.
CSS Version	CSS2

Example

The following code shows how to collapse the table border.


<!DOCTYPE html>
<html>
<body>
<!-- w ww.ja  v a  2 s .com-->
<table id="myTable" border="1">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>A</td>
    <td>$1</td>
  </tr>
  <tr>
    <td>B</td>
    <td>$5</td>
  </tr>
</table>
<br>

<button type="button" onclick="myFunction()">Collapse border</button>

<script>
function myFunction() {
    document.getElementById("myTable").style.borderCollapse = "collapse";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to use get the borderCollapse property.


<!DOCTYPE html>
<html>
<head>
<style>
td, th {<!--   w  w  w.j  a v  a2  s.com-->
    border: 1px solid black;
}
</style>
</head>
<body>

<table id="myTable" style="border-collapse:collapse;">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>A</td>
    <td>$1</td>
  </tr>
  <tr>
    <td>B</td>
    <td>$5</td>
  </tr>
</table>
<br>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myTable").style.borderCollapse);
}
</script>

</body>
</html>

The code above is rendered as follows: