自适应横屏竖屏自动切换表格效果
代码语言:html
所属分类:表格
代码描述:自适应横屏竖屏自动切换表格效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import "https://fonts.googleapis.com/css?family=Montserrat:300,400,700"; .rwd-table { margin: 1em 0; min-width: 300px; } .rwd-table tr { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .rwd-table th { display: none; } .rwd-table td { display: block; } .rwd-table td:first-child { padding-top: .5em; } .rwd-table td:last-child { padding-bottom: .5em; } .rwd-table td:before { content: attr(data-th) ": "; font-weight: bold; width: 6.5em; display: inline-block; } @media (min-width: 480px) { .rwd-table td:before { display: none; } } .rwd-table th, .rwd-table td { text-align: left; } @media (min-width: 480px) { .rwd-table th, .rwd-table td { display: table-cell; padding: .25em .5em; } .rwd-table th:first-child, .rwd-table td:first-child { padding-left: 0; } .rwd-table th:last-child, .rwd-table td:last-child { padding-right: 0; } } body { padding: 0 2em; font-family: Montserrat, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: #444; background: #eee; } h1 { font-weight: normal; letter-spacing: -1px; color: #34495E; } .rwd-table { background: #34495E; color: #fff; border-radius: .4em; overflow: hidden; } .rwd-table tr { bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0