border-collapse

border-collapse 用於表格屬性, 表示表格的兩框線合併為一條。

基本介紹

• 外文名：border-collapse
• 用途：表格屬性
• 功能：表格的兩框線合併為一條
• 默認值：separate

簡介

border-collapse

語法

border-collapse：separate | collapse | inherit

默認值：separate

取值

separate：

默認值。框線會被分開。不會忽略border-spacing 和 empty-cells 屬性。

collapse：

如果可能，框線會合併為一個單一的框線。會忽略border-spacing 和 empty-cells 屬性。

inherit：

規定應該從父元素繼承border-collapse屬性的值。

說明

border-collapse屬性設定表格的框線是否被合併為一個單一的框線，還是象在標準的 HTML 中那樣分開顯示

對應的腳本特性為borderCollapse。

以下是border-collapse屬性使用說明列表：

默認值:	separate
繼承:	yes
版本:	CSS2
JavaScript 語法:	object object.style.borderCollapse="collapse"

示例

首先，我們知道border-collapse屬性取值如下：

border-collapse屬性值	說明
separate	默認值，框線分開，不合併
collapse	框線合併，如果相鄰，則共用一個框線

HTML代碼：

    <table>        <caption>表格標題</caption>        <!--表頭-->        <thead>            <tr>                <th>表頭單元格1</th>        <th>表頭單元格2</th>            </tr>        </thead>        <!--表身-->        <tbody>            <tr>                <td>標準單元格1</td>                <td>標準單元格2</td>            </tr>            <tr>                <td>標準單元格1</td>                <td>標準單元格2</td>            </tr>        </tbody>        <!--表腳-->        <tfoot>            <tr>                <td>標準單元格1</td>                <td>標準單元格2</td>            </tr>        </tfoot>    </table>

CSS代碼：

        table,th,td{border:1px solid gray;}        table{border-collapse:collapse;}

對比一下不加“border-collapse:collapse;“就可以深刻理解border-collapse屬性了。