开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html> <head> <title>使用 JavaScript 改变边框合并属性</title> <style> body { text-align: center; font-family: Arial, sans-serif; margin: 20px; } table { width: 300px; /* 固定宽度 */ margin: 20px auto; /* 水平居中 */ border: 1px solid black; /* 表格外边框 */ } th, td { border: 1px solid black; /* 单元格边框 */ padding: 8px; } button { margin: 10px; padding: 8px 16px; } /* 边框合并样式 */ .collapsed { border-collapse: collapse; } </style> </head> <body> <h2>border-collapse 属性演示</h2> <p>点击按钮切换表格边框合并效果：</p> <button onclick="myFunction()">合并表格边框</button> <table id="demoTable"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </table> <script> // 原始功能代码 function myFunction() { document.getElementById("demoTable").style.borderCollapse = "collapse"; } </script> </body> </html>
运行结果：
