Javascript DOM CSS Style borderSpacing Property

Introduction

Set the space between cells in a table:

document.getElementById("myTable").style.borderSpacing = "20px";

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>//from w  w w  . j a  v  a  2s. c o m
<br>

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

<script>
function myFunction() {
  document.getElementById("myTable").style.borderSpacing = "20px";
}
</script>

</body>
</html>

The borderSpacing property sets or gets the space between cells in a table.

This property has no effect if borderCollapse is set to collapse.

Property Values

Value	Description
length length	Set the space between cells in length units. Negative values are not allowed. `Default` value is 0. If one length value is set, it sets both the horizontal and vertical spacing If two length values are set, the first sets the horizontal spacing and the second sets the vertical spacing
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The borderSpacing property returns a String, representing the space between cells in a table.

Previous Next