开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>border-spacing 演示</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } h2 { color: #333; margin-top: 30px; } table { width: 80%; margin-bottom: 30px; } th, td { padding: 8px; text-align: center; border: 1px solid #333; } th { background-color: #f2f2f2; } /* 示例1: 默认间距 */ .table1 { border-collapse: separate; /* 默认border-spacing为2px */ } /* 示例2: 统一间距 */ .table2 { border-collapse: separate; border-spacing: 10px; } /* 示例3: 不同水平垂直间距 */ .table3 { border-collapse: separate; border-spacing: 15px 5px; } /* 示例4: 大间距带背景色 */ .table4 { border-collapse: separate; border-spacing: 20px; background-color: #e6f7ff; } .table4 th, .table4 td { background-color: white; } </style> </head> <body> <h1>CSS border-spacing 属性演示</h1> <h2>1. 默认间距 (2px)</h2> <table class="table1"> <tr> <th>姓名</th> <th>年龄</th> <th>职业</th> </tr> <tr> <td>张三</td> <td>28</td> <td>设计师</td> </tr> <tr> <td>李四</td> <td>32</td> <td>工程师</td> </tr> </table> <h2>2. 统一间距 (10px)</h2> <table class="table2"> <tr> <th>姓名</th> <th>年龄</th> <th>职业</th> </tr> <tr> <td>王五</td> <td>25</td> <td>学生</td> </tr> <tr> <td>赵六</td> <td>40</td> <td>经理</td> </tr> </table> <h2>3. 不同水平(15px)垂直(5px)间距</h2> <table class="table3"> <tr> <th>产品</th> <th>价格</th> <th>库存</th> </tr> <tr> <td>手机</td> <td>¥2999</td> <td>120</td> </tr> <tr> <td>笔记本</td> <td>¥5999</td> <td>45</td> </tr> </table> <h2>4. 大间距(20px)带背景色效果</h2> <table class="table4"> <tr> <th>城市</th> <th>人口</th> <th>特色</th> </tr> <tr> <td>北京</td> <td>2171万</td> <td>首都</td> </tr> <tr> <td>上海</td> <td>2424万</td> <td>金融中心</td> </tr> </table> </body> </html>
运行结果：
