You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > webkitBorderHorizontalSpacing

webkitBorderHorizontalSpacing style property

Browser support:
Specifies or returns the amount of horizontal space between cells in a table.

Syntax:

object.webkitBorderHorizontalSpacing;
You can find the related objects in the Supported by objects section below.
This property is read/write.
CSS page for this property: -webkit-border-horizontal-spacing

Possible values:

The type of this property is string.
 One of the following values: 
inherit
Takes the value of this property from the computed style of the parent element.
space in non-negative length
The space between cells in length units. For the supported length units, see the length page.
Default: 0.

Example HTML code 1:

This example illustrates the use of the -webkit-border-horizontal-spacing property:
<head>
    <style>
        .myTable {
            -webkit-border-horizontal-spacing: 20px;
            -webkit-border-vertical-spacing: 10px;
        }
    </style>
</head>
<body>
    <table class="myTable" border="2px">
        <tbody>
            <tr>
                <td>apple</td>
                <td>32</td>
            </tr>
            <tr>
                <td>peach</td>
                <td>64</td>
            </tr>
            <tr>
                <td>cherry</td>
                <td>23</td>
            </tr>
        </tbody>
    </table>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the webkitBorderHorizontalSpacing property in JavaScript:
<head>
    <style>
        #myTable {
            -webkit-border-horizontal-spacing: 20px;
            -webkit-border-vertical-spacing: 10px;
        }
    </style>
    <script type="text/javascript">
        function ChangeSpaceSize () {
            var table = document.getElementById ("myTable");
            var size = document.getElementById ("size").value;

            if ('webkitBorderHorizontalSpacing' in table.style) {
                table.style.webkitBorderHorizontalSpacing = size + "px";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <table id="myTable" border="2px">
        <tbody>
            <tr>
                <td>apple</td>
                <td>32</td>
            </tr>
            <tr>
                <td>peach</td>
                <td>64</td>
            </tr>
            <tr>
                <td>cherry</td>
                <td>23</td>
            </tr>
        </tbody>
    </table>
    <br />
    <input id="size" value="40" />
    <button onclick="ChangeSpaceSize ()">Change Horitontal spacing of table cells</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content