九宫格表格样式

业务中真是各种需求都有,例如如何使用CSS绘制一个九宫格表格,不要外边框。

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         html, body {
10             height: 100%;
11             margin: 0;
12             padding: 0;
13         }
14 
15         table {
16             border-collapse:collapse;
17             width: 100%;
18             height: 100%;
19             text-align: center;
20         }
21 
22         td {
23             border: 1px solid black;
24         }
25 
26         tr:first-child > td {
27             border-top: none;
28         }
29 
30         tr:last-child > td {
31             border-bottom: none;
32         }
33 
34         tr > td:first-child {
35             border-left: none;
36         }
37 
38         tr > td:last-child {
39             border-right: none;
40         }
41     </style>
42 </head>
43 <body>
44     <table>
45         <thead></thead>
46         <tbody>
47             <tr>
48                 <td>1</td>
49                 <td>2</td>
50                 <td>3</td>
51             </tr>
52             <tr>
53                 <td>4</td>
54                 <td>5</td>
55                 <td>6</td>
56             </tr>
57             <tr>
58                 <td>7</td>
59                 <td>8</td>
60                 <td>9</td>
61             </tr>
62         </tbody>
63     </table>
64 </body>
65 </html>

运行效果:

原文地址:https://www.cnblogs.com/viewts/p/11242528.html