css实现自适应响应式table表格效果代码
代码语言:html
所属分类:响应式
代码描述:css实现自适应响应式table表格效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> *{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } body{ font-family: Helvetica; -webkit-font-smoothing: antialiased; background: rgba( 71, 147, 227, 1); } h2{ text-align: center; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; color: white; padding: 30px 0; } /* Table Styles */ .table-wrapper{ margin: 10px 70px 70px; box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 ); } .fl-table { border-radius: 5px; font-size: 12px; font-weight: normal; border: none; border-collapse: collapse; width: 100%; max-width: 100%; white-space: nowrap; background-color: white; } .fl-table td, .fl-table th { text-align: center; padding: 8px; } .fl-table td { border-right: 1px solid #f8f8f8; font-size: 12px; } .fl-table thead th { color: #ffffff; background: #4FC3A1; } .fl-table thead th:nth-child(odd) { color: #ffffff; background: #324960; } .fl-table tr:nth-child(even) { background: #F8F8F8; } /* Responsive */ @media (max-width: 767px) { .fl-table { display: block; width: 100%; } .table-wrapper:before{ content: "Scroll horizontally >"; display: block; text-align: right; font-size: 11px; color: white; padding: 0 0 10px; } .fl-table thead, .fl-table tbody, .fl-table thead th { display: block; } .fl-table thead th:last-child{ border-bottom: none; } .fl-table thead { float: left; } .fl-table tbody { width: auto; position: relative; overflow-x: auto; } .fl-table td, .fl-table th { padding: 20px .625em .625em .625em; height: 60px; vertical-align: middle; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; width: 120px; font-size: 13px; text-overflow: ellipsis; } .fl-table thead th { text-align: left; border-bottom: 1px solid #f7f7f9; } .fl-table tbody tr { display: table-cell; } .fl-table tbody tr:nth-child(odd) { background: none; } .fl-table tr:nth-child(even) { background: transparent; } .fl-table tr td:nth-child(odd) { background: #F8F8F8; border-right: 1px solid #E6E4E4; } .fl-table tr td:nth-child(even) { border-right: 1px solid #E6E4E4; } .fl-table tbody td { display: block; text-align: center; } } </style> </head> <body> <h2>调整浏览器窗口大小查看效果</h2> <div class="table-wrapp.........完整代码请登录后点击上方下载按钮下载查看
网友评论0