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.




PreviousNext

Related