css 纯css自适应页面示例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>纯CSS自适应响应式Table数据表格DEMO演示</title>

 <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-wrapper">

     <table class="fl-table">

         <thead>

         <tr>

             <th>Header 1</th>

             <th>Header 2</th>

             <th>Header 3</th>

             <th>Header 4</th>

             <th>Header 5</th>

         </tr>

         </thead>

         <tbody>

         <tr>

             <td>1</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

         </tr>

         <tr>

             <td>2</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

         </tr>

         <tr>

             <td>3</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

         </tr>

         <tr>

             <td>4</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

         </tr>

         <tr>

             <td>5</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

         </tr>

         <tr>

             <td>6</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

         </tr>

         <tr>

             <td>7</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

         </tr>

         <tr>

             <td>8</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

         </tr>

         <tr>

             <td>9</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

         </tr>

         <tr>

             <td>10</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

             <td>Content</td>

         </tr>

         <tbody>

     </table>

 </div>

 <div style="text-align:center;clear:both;">

 <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>

 <script src="/follow.js" type="text/javascript"></script>

 </div>

 </body>

 </html>

css 纯css自适应页面示例的更多相关文章

css 纯css轮播图示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
[TimLinux] CSS 纯CSS实现动画展开/收起功能
内容转自CSS世界,理解之后进行了简化,简化后代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /& ...
大神写的一个纯CSS圆角框，膜拜！（支持IE9一下的低版本）
留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
纯css实现省略号，兼容火狐，IE9，chrome
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
演示：纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
如何用纯CSS布局两列，一列固定宽度，另一列自适应？
大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...
简单而兼容性好的Web自适应高度布局，纯CSS
纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...
CSS 背景图像填充整个页面示例
background-image 属性可以设置背景图像. 背景图像可以填充整个页面的,也可以填写一部分. background-image 属性的使用很简单:background-image:url( ...
纯CSS实现Div高度根据自适应宽度（百分百调整）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

6.JavaSE之数据类型扩展及面试题讲解
整数:二进制0b 十进制八进制0 十六进制0x 浮点数:银行业务,关于钱的,Java有个BigDecimal数学工具类,用这个计算.最好完全避免使用浮点数进行比较.因为float 是有限的离散的,它 ...
06hive企业调优
一.Fetch抓取 Fetch抓取是指,Hive 中对某些情况的查询可以不必使用MapReduce计算. 在 hive-default.xml.template 文件中 hive.fetch.task ...
XSS Cheat Sheet
Basic and advanced exploits for XSS proofs and attacks. Work in progress, bookmark it. Technique Vec ...
Java Web面试题整理(思维导图)
1,动态网站技术有哪些? 2,一般的Web架构是指BS 还是CS,BS架构是什么咚咚? 3,Web应用程序的流程,即把一个URL串输入地址栏后发生写什么? 4,说一说Servlet生命周期? 5,在W ...
django cms 5月第一弹
官方文档: ##http://django-cms.readthedocs.io/en/latest/index.html #截图 #生存的项目结构
使用Razor表达式举数组和集合精通ASP-NET-MVC-5-弗瑞曼
Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据路由跳转到同一个页面带参数ID 自动刷新数据
准备:导入ElementUI 看官网教程数据准备:JSON数据转换成树状参考文章: JS实现 JSON扁平数据转换树状数据后台我拿的数据是这样的格式: [ {id:1 , parentId: 0 ...
widows 10 下解决在npm install python 环境报错的问题
1.使用管理员打开cmd 2.安装 node-gyp; gyp是一种根据c++源代码编译的工具,node-gyp就是为node编译c++扩展的时候使用的编译工具. npm install -g nod ...
Nginx-Http服务器常用配置
#运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; ...
SpringCloud与微服务系列专栏
一. 前置知识学习SpringCloud之前需要具备和掌握如下框架和工具的使用:SpringMVC,Spring,Spring Boot,Mybatis,Maven,Git. SpringCloud ...

css 纯css自适应页面 示例

css 纯css自适应页面 示例的更多相关文章

随机推荐

热门专题

css 纯css自适应页面示例

css 纯css自适应页面示例的更多相关文章