开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
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>表格边框模型演示</title> <style> body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; line-height: 1.6; } h1 { text-align: center; color: #333; font-size: 1.5rem; } table { width: 100%; margin: 20px 0; border: 1px solid #000; } th, td { padding: 10px; text-align: center; border: 1px solid #000; } th { background-color: #f2f2f2; } /* 您提供的边框模型样式 */ .separate { border-collapse: separate; border-spacing: 5px; } .collapse { border-collapse: collapse; } .demo-section { margin: 30px 0; } .demo-title { font-weight: bold; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #ddd; } </style> </head> <body> <h1>表格边框模型演示</h1> <div class="demo-section"> <div class="demo-title">分开边框模型 (border-collapse: separate)</div> <table class="separate"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>28</td> </tr> <tr> <td>李四</td> <td>32</td> </tr> </table> <p>特点：单元格有独立边框，边框间有间距</p> </div> <div class="demo-section"> <div class="demo-title">合并边框模型 (border-collapse: collapse)</div> <table class="collapse"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>王五</td> <td>25</td> </tr> <tr> <td>赵六</td> <td>30</td> </tr> </table> <p>特点：相邻单元格边框合并为单一线条</p> </div> </body> </html>
运行结果：
