borderSpacing Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:borderSpacing

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

Description

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

This property has no effect if borderCollapse is collapse.

Property Values

Value
 Description
length length




 Set the distance between cells in length units.
Negative values are not allowed.
Default value is 0.
If one length value is specified, it specifies both the horizontal and vertical spacing
If two length values are specified, 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.

Technical Details

Item Value
Default Value: 0
Return Value: A String, representing the space between cells in a table
CSS VersionCSS2

Get the space between cells in a table:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<table id="myTable" border="1" style="border-spacing:10px;">
  <tr>
    <th>Month</th>
    <th>Dollor</th>
  </tr>//w  ww . ja v  a 2 s.  co  m
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$150</td>
  </tr>
</table>
<br>

<button type="button" onclick="myFunction()">Return the space between the cells in the table</button>

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

</body>
</html>

Related Tutorials