borderCollapse Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:borderCollapse

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. borderCollapse

Description

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

Property Values

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

Technical Details

Item Value
Default Value: separate
Return Value: A String, representing the borders of a table
CSS VersionCSS2

Get the table border

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
td, th {
    border: 1px solid black;
}
</style>/* w  w  w.j  ava2s .  co  m*/
</head>
<body>

<table id="myTable" style="border-collapse:collapse;">
  <tr>
    <th>Month</th>
    <th>Dollor</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$150</td>
  </tr>
</table>
<br>

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

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

</body>
</html>

Related Tutorials