Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
You are here: Reference > CSS > properties > border-collapse

border-collapse property

Browser support:
Specifies whether the borders of a table are joined in a single border or not.
This property only works for table elements. If you want to use collapsed borders, the cellSpacing attribute must be set to '0px'.
JavaScript page for this property: borderCollapse. You can find other example(s) there.

Possible values:

 One of the following values: 
collapse
Borders are not drawn between table cell elements.
inherit
Takes the value of this property from the computed style of the parent element.
separate
Default. Separate borders are drawn for all table cell element.
Default: separate.

Example HTML code 1:

This example illustrates the use of the border-collapse property:
<head>
    <style>
        .collapsed {
            border-collapse: collapse;
        }
        .collapsed td {
            border: 1px solid blue;
        }
        .separated {
            border-collapse: separate;
        }
        .separated td {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    Table with collapsed border:
    <table class="collapsed">
        <tr>
            <td>Apple</td>
            <td>13.46</td>
        </tr>
        <tr>
            <td>Pear</td>
            <td>35.21</td>
        </tr>
        <tr>
            <td>Peach</td>
            <td>23.12</td>
        </tr>
    </table>
    <br /><br />
    Table with separated border:
    <table class="separated">
        <tr>
            <td>Apple</td>
            <td>13.46</td>
        </tr>
        <tr>
            <td>Pear</td>
            <td>35.21</td>
        </tr>
        <tr>
            <td>Peach</td>
            <td>23.12</td>
        </tr>
    </table>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content