自适应横屏竖屏自动切换表格效果
代码语言:html
所属分类:表格
代码描述:自适应横屏竖屏自动切换表格效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { padding:1.5em; background: #f5f5f5 } table { border: 1px #a39485 solid; font-size: .9em; box-shadow: 0 2px 5px rgba(0,0,0,.25); width: 100%; border-collapse: collapse; border-radius: 5px; overflow: hidden; } th { text-align: left; } thead { font-weight: bold; color: #fff; background: #73685d; } td, th { padding: 1em .5em; vertical-align: middle; } td { border-bottom: 1px solid rgba(0,0,0,.1); background: #fff; } a { color: #73685d; } @media all and (max-width: 768px) { table, thead, tbody, th, td, tr { display: block; } th { text-align: right; } table { position: relative; padding-bottom: 0; border: none; box-shadow: 0 0 10px rgba(0,0,0,.2); } thead { float: left; white-space: nowrap; } tbody { overflow-x: auto; overflow-y: hidden; position: relative; white-space: nowrap; } tr { display: inline-block; vertical-align: top; } th { border-bottom: 1px solid #a39485; } td { border-bottom: 1px solid #e5e5e5; } } </style> </head> <body translate="no"> <table> <thead> <tr> <th>First Name</th> <th>Last Name&l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0