业务中真是各种需求都有,例如如何使用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>
运行效果: