css美化table图文表格效果代码
代码语言:html
所属分类:表格
代码描述:css美化table图文表格效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } .subbox table { max-width: 800px; margin:100px auto; text-align: left; border-spacing: 0; color: #333; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } .subbox td { padding: 8px 16px; font-size: 14px; border-bottom: 1px solid #f4f4f4; } .subbox th { padding: 16px; } .subbox img { width: 40px; border-radius: 50%; } .subbox tr:last-child > td { border: 0; } .subbox tbody > tr:hover { background-color: rgba(221, 221, 221, 0.2); } .subbox thead { text-transform: uppercase; font-size: 12px; background-color: #efefef; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.4); } .option { display: inline-block; padding: 5px 10px; background-color: #ddd; border-radius: 4px; margin-right: 15px; } .name { min-width: 110px; display: inline-block; } .comment { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; display: inline-block; } .option.is-blue { background-color: #bceefd; } .option.is-orange { background-color: #ffd89e; } .option.is-purple { background-color: #e9cbff; } .option.is-green { background-color: #bef1a9; } </style> </head> <body> <div class="subbox"> <table> <thead> <tr> <th>头像</th> <th>名字</th> <th>邮箱</th> <th>行业</th> <th>日期</th> <th>简介</th> </tr> </thead> <tbody> <tr> <td> <img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" /> </td> <td> <span class="name">小米</span> </td> <td> <span class="email">11@qw.com</span> </td> <td> <span class="option is-blue">教育</span> </td> <td> <span class="date">2021/12/12</span> </td> <td> <span class="comment">教育事业</span> </td> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0