In order to access this site you need to enable JavaScript!

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>

Copy Code

Preview

Syntax Highlighter

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>