css实现自适应响应式table表格效果代码
代码语言:html
所属分类:响应式
代码描述:css实现自适应响应式table表格效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> body { font-family: "Helvetica Neue", Helvetica, Arial; font-size: 14px; line-height: 20px; font-weight: 400; color: #3b3b3b; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; background: #2b2b2b; } @media screen and (max-width: 580px) { body { font-size: 16px; line-height: 22px; } } .wrapper { margin: 0 auto; padding: 40px; max-width: 800px; } .table { margin: 0 0 40px 0; width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); display: table; } @media screen and (max-width: 580px) { .table { display: block; } } .row { display: table-row; background: #f6f6f6; } .row:nth-of-type(odd) { background: #e9e9e9; } .row.header { font-weight: 900; color: #ffffff; background: #ea6153; } .row.green { background: #27ae60; } .row.blue { background: #2980b9; } @media screen and (max-width: 580px) { .row { padding: 14px 0 7px; display: block; } .row.header { padding: 0; height: 6px; } .row.header .cell { display: none; } .row .cell { margin-bottom: 10px; } .row .cell:before { margin-bottom: 3px; content: attr(data-title); min-width: 98px; font-size: 10px; line-height: 10px; font-weight: bold; text-transform: uppercase; color: #969696; display: block; } } .cell { padding: 6px 12px; display: table-cell; } @media screen and (max-width: 580px) { .cell { padding: 2px 16px; display: block; } } </style> </head> <body> <div class="wrapper"> <div class="table"> <div class="row header"> <div class="cell"> Name </div> <div class="cell"> Age </div> <div class="cell"> Occupation </div> <div class="cell"> Location </div> </div> <div class="row"> <div class="cell" data-title="Name"> Luke Peters </div> <div class="cell" data-title="Age"> 25 </div> <div class="cell" data-title="Occupation"> Freelance Web Developer </div> <div class="cell" data-title="Location"> Brookline, MA </div> </div> <div class="row"> <div class="cell" data-title="Name"> Joseph Smith </div> <div class="cell" data-title="Age"> 27 </div> <div class="cell" data-title="Occupation"> Project Manager </div> <div class="cell" data-title="Location"> Somerville, MA </div> </div> <div class="row"> <div class="cell" data-title="Name"> Maxwell Johnson </div> <div class="cell" data-title="Age"> 26 </div> <div class="cell" data-title="Occupation"> UX Architect & Designer </div> <div class="cell" data-title="Location"> Arlington, MA </div> </div> <div class="row"> <div class="cell" data-title="Name"> Harry Harrison </div> <div class="cell" data-title="Age"> 25 </div> <div class="cell" data-title="Occupation"> Front-End Developer </div> <div class="cell" data-title="Location"> Boston, MA </div> </div> </div> <div class="table"> <div class="row header green"> <div class="cell"> Product </div> <div class="cell"> Unit Price </div> <div class="cell"> Quantity </div> <div class="cell"> Date Sold </div> <div class="cell"> Status </div> </div> <div class="row"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0