一段实现井字形表格的CSS,兼容IE7、IE8、IE9、IE10、Firefox、Chrome

效果图:

html+css代码:

复制代码
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,并可设置内边框的边框样式。

posted @   成宇佳  阅读(2315)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示