CSS border-collapse实例讲解

发布时间：2025-12-09 11:52:24 浏览次数：2

CSS中的border-collapse属性用于设置表格中存在的单元格的边界,并告诉这些单元格是否将共享公共边界。

用法:

border-collapse:separate|collapse|initial|inherit;

属性值:

separate:此属性用于设置单元格的单独边框。
collapse:它用于折叠相邻单元格并形成公共边界。
initial:它用于将border-collapse属性设置为其默认值。
inherit:当border-collapse属性从其父元素继承时使用。

范例1:

<!DOCTYPE html>  <html>      <head>          <title>             CSS border-collapse Property         </title>                   <!-- border-collapse CSS property -->        <style>             table, td, th {                 border:1px solid black;             }             #separateTable {                 border-collapse:separate;             }             #collapseTable {                 border-collapse:collapse;             }         </style>     </head>       <body>         <h2>             border-collapse:separate         </h2>                   <table id = "separateTable">             <tr>                 <th>Author Name</th>                 <th>Contact No</th>             </tr>             <tr>                 <td>Geek</td>                 <td>XXXXXXXXXX</td>             </tr>             <tr>                 <td>GFG</td>                 <td>XXXXXXXXXX</td>             </tr>         </table>               <h2>             border-collapse:collapse         </h2>                   <table id = "collapseTable">             <tr>                 <th>Author Name</th>                 <th>Contact No</th>             </tr>             <tr>                 <td>Geek</td>                 <td>XXXXXXXXXX</td>             </tr>             <tr>                 <td>GFG</td>                 <td>XXXXXXXXXX</td>             </tr>         </table>     </body> </html>

输出:

范例2:

<!DOCTYPE html>  <html>      <head>          <title>             CSS border-collapse Property         </title>                   <style>             table, td, th {                 border:1px solid black;             }                           /* border spacing is used to specify the              width between border and adjacent cells */             #separateTable {                 border-collapse:separate;                 border-spacing:10px;             }             #collapseTable {                 border-collapse:collapse;                 border-spacing:10px;             }             #initialTable {                 border-collapse:initial;             }         </style>     </head>           <body>         <h2>             border-collapse:separate         </h2>                   <table id = "separateTable">             <tr>                 <th>Author Name</th>                 <th>Contact No</th>             </tr>             <tr>                 <td>Geek</td>                 <td>XXXXXXXXXX</td>             </tr>             <tr>                 <td>GFG</td>                 <td>XXXXXXXXXX</td>             </tr>         </table>                   <h2>             border-collapse:collapse         </h2>                   <!-- border spacing property has no         effect on border-collapse property-->        <table >             <tr>                 <th>Author Name</th>                 <th>Contact No</th>             </tr>             <tr>                 <td>Geek</td>                 <td>XXXXXXXXXX</td>             </tr>             <tr>                 <td>GFG</td>                 <td>XXXXXXXXXX</td>             </tr>         </table>                   <h2>             border-collapse:initial         </h2>                   <table >             <tr>                 <th>Author Name</th>                 <th>Contact No</th>             </tr>             <tr>                 <td>Geek</td>                 <td>XXXXXXXXXX</td>             </tr>             <tr>                 <td>GFG</td>                 <td>XXXXXXXXXX</td>             </tr>         </table>     </body> </html>

输出:

支持的浏览器:下面列出了border-collapse属性支持的浏览器:

谷歌浏览器1.0
Internet浏览器/Edge 5.0
Firefox 1.0
Opera 4.0
苹果Safari 1.2

border-collapse

上一篇：Linux下的 Whoami 命令下一篇：DotNET介绍_dotnet 6

知识问答

CSS border-collapse实例讲解

综合百科

网站导航