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

随机推荐

Scala实践4
一.数组在Scala中,用()来访问元素,数组声明的语法格式如下 : var z:Array[String] = new Array[String](3) 或 var z = new Array[S ...
灵魂画师，在线科普多云平台/CMP云管平台/中间件/虚拟化/容器是个啥
原创: 灵魂工作室速石科技经常碰到有人问: 你们是云管吗? 你们和CMP多云管理平台有什么区别? 你们这个多云平台到底是个啥? emmmmm,问题还挺不好回答. 为了说清楚这些问题,但又不希望你们 ...
Ndarry对象
创建一个 ndarray 只需调用 NumPy 的 array 函数即可: numpy.array(object, dtype = None, copy = True, order = None, s ...
python scoket
一.简介 scoket(套结字)在python就是模块二.分类基于文件型(不用) 基于网络型名字:AF_INET AF_INET6 三.scoket应用 1.基于tcp 长连接:基于tcp的Se ...
为什么你应该使用 Kubernetes(k8s)
Kubernetes (Kube 或 K8s)越来越流行,他是市场上最好的容器编排工具之一. 1. 什么是容器? 容器就是一个包,其中包含了应用及其所有依赖. 容器中的应用与主机系统是隔离的,不关注环 ...
IntelliJ IDEA编辑文件的时候CPU飙高问题的解决
原文地址:https://www.javatang.com/archives/2018/04/26/25582403.html 上篇文章中说明了解决IntelliJ IDEA中文输入法无提示的问题,最 ...
ERR : undefined reference to something
序言: define : 定义.相信你用过 #define PI 3.141592653 (千万记得别在这句代码后加分号) reference : 引用 undefined reference to ...
c#数字图像处理（四）线性点运算
灰度图像的点运算可分为线性点运算和非线性点运算两种.4.1线性点运算定义线性点运算就是输出灰度级与输入灰度级呈线性关系的点运算.在这种情况下,灰度变换函数的形式为: g(x, y)=pf(x,y)+L ...
linux C++类中成员变量和函数的使用
1.undefined reference to XXX 问题原因 1)XXX所在的so库等未指定 2)XXX在类中实现的时候没有加上类::函数的格式 2. was not declared in t ...
[SDOI2011]染色（树链剖分）
[SDOI2011]染色(luogu) Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段 ...

css 纯css自适应页面 示例

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

随机推荐

热门专题

css 纯css自适应页面示例

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