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> ...

随机推荐

性能测试-详细的 TPS 调优笔记
概述在本地针对项目的登录接口做了一次简单的压力测试.200并发持续120s,观察吞吐量运行结束之后,吞吐量是这样的如图所示,吞吐量波动巨大,完全不正常.现在我们需要去观察一下服务器了 mpsta ...
BigDecimal的加减乘除，比较，小数保留
关于BigDecimal的一些常用基本操作记录 1 BigDecimal b1 = new BigDecimal("1.124"); 2 BigDeci ...
如何使用F4的IRAM2内存
在使用KEIL做F4的项目的时候发现RAM区有片上IRAM2选项,查了datesheet后发现这块是CCM内存区 CCM内存是在地址0x1000000映射的64KB块,只提供CPU通过数据D总线进行访 ...
吸取教训：一段网上找的代码突然爆了，项目出现大BUG
本人是做游戏服务器开发的,碰到一个需求,给符某些要求的玩家的发送道具奖励,奖励的数量根据离线的天数计算. 这个需求实现起来很简单,只需要在玩家上线的时候计算上次离线时间和当前时间间隔的天数,然后根据策 ...
聊一聊 InnoDB 引擎中的索引类型
索引对数据库有多重要,我想大家都已经知道了吧,关于索引可能大家会对它多少有一些误解,首先索引是一种数据结构,并且索引不是越多越好.合理的索引可以提高存储引擎对数据的查询效率. 形象一点来说呢,索引跟书 ...
python StringIO和ByteIO
一.StringIO 1.作用:在内存在读写str # 导入模块 from io import StringIO # 实例化StringIO对象 str_io = StringIO() # 向内存中写 ...
Xadmin的实现
一.启动 1.前提配置setting.py文件 INSTALLED_APPS 2.定位Xadmin,找到对应的类 'Xadmin.apps.XadminConfig', 3.根据admin源码,实现 ...
[转载收藏]C#基础知识梳理系列十一：垃圾回收机制
摘要基于.NET平台的开发语言中,最让开发人员爽的一点就是垃圾回收处理机制,在编码过程中,终于可以解放你的双手来关注更重要的事情.很多的资料中在讲到.NET中的垃圾回收机制时都说"CLR ...
正斜杠(" / ")和反斜杠(" \ ")的区别
反斜杠“\”是电脑出现了之后为了表示程序设计里的特殊含义才发明的专用标点.所以除了程序设计领域外,任何地方都不应该使用反斜杠. 如何区分正反斜杠英语:"/" 英文是forward ...
Python学习，第一课 - 基础学习
前言. 本内容全部以python3所讲一.Python安装 windows 1.下载安装包 https://www.python.org/downloads/ 2.安装默认安装路径:C:\pyth ...

css 纯css自适应页面 示例

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

随机推荐

热门专题

css 纯css自适应页面示例

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