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> ...
随机推荐
- mysql索引创建和使用细节
最近困扰自己很久的膝盖积液手术终于做完,在家养伤,逛技术博客看到easyswoole开发组成员仙士可博客有关mysql索引方面的知识,自己打算重温下. 正常业务起步数据表数据量较少,不用考虑使用索引, ...
- TensorFlow——tf.contrib.layers库中的相关API
在TensorFlow中封装好了一个高级库,tf.contrib.layers库封装了很多的函数,使用这个高级库来开发将会提高效率,卷积函数使用tf.contrib.layers.conv2d,池化函 ...
- mongo repository
using MongoDB.Driver; namespace Dben.Invoice.Repository { /// <summary> /// 仓储基类 /// </summ ...
- L1-006 连续因子 (20分)
题意分析 题目中已经将意思说的很清楚了,就是输出一个数的最长连续因子的个数,并且输出是哪几个因子相乘.可以将题目从这两个角度进行分析: N为素数时,最长连续因子的个数为1,即它自己. N不为素数时,即 ...
- python如何计算程序（代码块）的运行时间？
1.引入time模块 2.调用time模块的time()函数 :用来获取当前的时间,返回的单位是秒 # 引入一个time模块, * 表示time模块的所有功能, # 作用: 可以统计程序运行的时间 f ...
- Nginx配置文件模板
主配置文件nginx.conf user nginx; #设置nginx服务的系统使用用户 worker_processes 1; #工作进程数(和cpu核心数保持一致) error_log /var ...
- Redis系列-存储hash主要操作命令
Redis系列-存储篇hash主要操作函数小结 hash是一些列key value(field value)的映射表.常常用其存储一些对象实例.相对于把一个对象的各个字段存储为string,存储为ha ...
- java面试|精选基础(1)
以下题目是从面试经历和常考面试题中选出有点儿意思的题目,参考答案如有错误,请联系小编指正,感谢! 1.反射 1.1定义 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法 ...
- (转) exp1-1:// 一次有趣的XSS漏洞挖掘分析（1）
from http://www.cnblogs.com/hookjoy/p/3503786.html 一次有趣的XSS漏洞挖掘分析(1) 最近认识了个新朋友,天天找我搞XSS.搞了三天,感觉这一套 ...
- GP工作室-团队项目Beta冲刺
GP工作室-团队项目Beta冲刺 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ 这个作业要求 ...