Javascript DOM CSS Style borderCollapse Property

Introduction

Collapse the table border:

document.getElementById("myTable").style.borderCollapse = "collapse";

View in separate window

<!DOCTYPE html>
<html>
<body>

<table id="myTable" border="1">
  <caption id="myCaption">Monthly Salary</caption>
  <tr>  <th>Item</th>    <th>Savings</th>  </tr>
  <tr>  <td>CSS</td>     <td>$100</td>     </tr>
  <tr>  <td>HTML</td>    <td>$50</td>      </tr>
</table>/*w ww . j  av a 2 s .  co m*/
<br>

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

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

</body>
</html>

The borderCollapse property sets or gets whether the table border should be collapsed into a single border.

Property Values

ValueDescription
separate Separate borders are drawn for all table cell elements. Default
collapse Borders are not drawn between table cell elements
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The borderCollapse property returns a String representing the borders of a table.




PreviousNext

Related