css细线表格代码实例
分类:实例代码
table表格的应用还是十分广泛的,细线表格在外观上较为美观。
下面分享一个能够应用于实际项目中的细线表格代码。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { padding: 0; margin: 0; } #_head { background-color: green; } #_head { text-align: center; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th,td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; text-align: center; } </style> </head> <body> <div id="wrapbox"> <table> <thead id="_head"> <tr> <th><input type="checkbox" id="qx"></th> <th>菜名</th> <th>厨师</th> <th>价格</th> </tr> </thead> <tbody id="_tbody"> <tr> <td><input type="checkbox"></td> <td>红烧鱼</td> <td>张一</td> <td>18</td> </tr> <tr> <td><input type="checkbox"></td> <td>红烧肉</td> <td>张二</td> <td>18</td> </tr> <tr> <td><input type="checkbox"></td> <td>红烧狮子头</td> <td>张三</td> <td>18</td> </tr> <tr> <td><input type="checkbox"></td> <td>红烧小青菜</td> <td>张四</td> <td>18</td> </tr> </tbody> </table> </div> </body> </html>
css细线表格代码实例,这样的场景在实际项目中还是用的比较多的,关于css细线表格代码实例就介绍到这了。
css细线表格代码实例属于前端实例代码,有关更多实例代码大家可以查看。