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

随机推荐

Spring Boot2 系列教程 (十) | 实现声明式事务
前言如题,今天介绍 SpringBoot 的声明式事务. Spring 的事务机制所有的数据访问技术都有事务处理机制,这些技术提供了 API 用于开启事务.提交事务来完成数据操作,或者在发生错误 ...
《C# 爬虫破境之道》：第一境爬虫原理 — 第三节：WebResponse
第二节中,我们介绍了WebRequest,它可以帮助我们发送一个请求,不过正所谓“来而不往非礼也”,对方收到我们的请求,不给点回复,貌似不太合适(不过,还真有脸皮厚的:P). 接下来,就重点研究一下, ...
Android权限系统
Android系统为每个应用程序提供了一个安全的运行环境,不同程序间相互隔离,应用程序的数据等私有资源,外界无法访问.这个安全的运行环境由Android的权限系统(可称为沙箱系统)来提供.本文简单记录 ...
kubernetes concepts -- Replication Controller
Edit This Page ReplicationController NOTE: A Deployment that configures a ReplicaSet is now the reco ...
Python处理URL编码
我们在访问网站时,有很多连接都是有一些特殊符号组成,例如,我在百度搜索“大鱼海棠”,结果可以看到它的搜索出来的链接是: https://www.baidu.com/s?wd=%E5%A4%A7%E9% ...
pythonenv的安装及迁移
一.安装运行 pip install virtualenv 即可安装virtualenv,想用最新开发版就运行二. virtualenv基本使用 $ python virtualenv.py ...
windows丢失文件的恢复技巧
这几天在使用STVD调试程序的时候,突然跳出来一个“共享冲突”错误,当时并没有在意,点确定后赶紧CTRL+S,然后就一直死在那里了... 结束任务,重启STVD,提示找不到main.c,到此也不以为然 ...
Docker基础内容之容器
前言容器是独立运行的一个或一组应用以及它们的运行态环境. 相关命令启动容器相关命令 docker run 运行一个ubuntu14.04版本的容器,如果这个镜像本地不存在则会去默认仓库中下载 do ...
Windows环境安装与配置RocketMQ
1.下载RocketMQ http://rocketmq.apache.org/release_notes/release-notes-4.3.0/ 2.解压下载的安装包rocketmq-all-4. ...
SpringBoot缓存篇Ⅰ--- 缓存抽象
缓存是每一个系统应该考虑的功能,它可以用来加速系统的访问,提升系统性能,例如要经常访问的高频热点数据,例如某一个商品网站的商品信息,商品信息存储在数据库中,若每次访问都要查询数据库的话,这样的操作耗时 ...

css 纯css自适应页面 示例

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

随机推荐

热门专题

css 纯css自适应页面示例

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