一段实现井字形表格的CSS,兼容IE7、IE8、IE9、IE10、Firefox、Chrome
效果图:
html+css代码:

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>井字形表格</title> 6 <style type="text/css"> 7 table { 8 border-collapse: collapse; 9 border: none; 10 background-color: #ccc; 11 } 12 13 table td { 14 border: 1px dashed black; 15 padding: 5px; 16 border-bottom: none; /*去除表格下边的边框*/ 17 border-right: none; /*去除表格右边的边框*/ 18 } 19 20 /*去除表格上边的边框*/ 21 table tr:first-child td { 22 border-top: none; 23 } 24 25 /*去除表格左边的边框*/ 26 table tr td:first-child { 27 border-left: none; 28 } 29 </style> 30 </head> 31 <body> 32 <table> 33 <tr> 34 <td>内容</td> 35 <td>内容</td> 36 <td>内容</td> 37 <td>内容</td> 38 </tr> 39 <tr> 40 <td>内容</td> 41 <td>内容</td> 42 <td>内容</td> 43 <td>内容</td> 44 </tr> 45 <tr> 46 <td>内容</td> 47 <td>内容</td> 48 <td>内容</td> 49 <td>内容</td> 50 </tr> 51 <tr> 52 <td>内容</td> 53 <td>内容</td> 54 <td>内容</td> 55 <td>内容</td> 56 </tr> 57 <tr> 58 <td>内容</td> 59 <td>内容</td> 60 <td>内容</td> 61 <td>内容</td> 62 </tr> 63 </table> 64 </body> 65 </html>
兼容IE7、IE8、IE9、IE10、Firefox、Chrome,并可设置内边框的边框样式。
作者:成宇佳
博客主页:http://www.cnblogs.com/chengyujia/
欢迎转载,但请保留作者和本文链接,谢谢!
欢迎在下面的评论区与我交流。
博客主页:http://www.cnblogs.com/chengyujia/
欢迎转载,但请保留作者和本文链接,谢谢!
欢迎在下面的评论区与我交流。
如果觉得写的不错,请点击下面的“推荐”按钮,让我更有动力写出更好的文章。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?