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> ...
随机推荐
- php5升php7代码修改整理
1. 为什么升级至php7 a.安全需要 过早以至于不维护的php版本难免会有未修补的漏洞,安全性要求较高的行业是要及时升级的. b.性能提升(开启opcache hugepage) 据说性能提升一倍 ...
- python如何计算程序（代码块）的运行时间？
1.引入time模块 2.调用time模块的time()函数 :用来获取当前的时间,返回的单位是秒 # 引入一个time模块, * 表示time模块的所有功能, # 作用: 可以统计程序运行的时间 f ...
- 【Tool】---ubuntu18.04配置oh-my-zsh工具
作为Linux忠实用户,应该没有人不知道bash shell工具了吧,其实除了bash还有许多其他的工具,zsh就是一款很好得选择,基于zsh shell得基础之上,oh-my-zsh工具更是超级利器 ...
- Nginx作为负载均衡服务器——server参数讲解
upstream举例 upstream backend { server backend1.ecample.com weight = 5; # wwight 代表权重 server backend2. ...
- auth.User.groups: (fields.E304) Reverse accessor for 'User.groups'
创建表,运行下面命令,出错 makemigrations 原因:继承auth_user 解决方案 在settings.py文件添加 AUTH_USER_MODEL = "app名称.类名&q ...
- Egret学习-初次创建项目
最近无聊,好久没有写游戏了,决定学习下egret,主要原因:egret是h5框架,相比android和iPhone或cocos2dx来说不需要安装可以直接运行. 下面进入正题,开始学习egret 简单 ...
- StampedLock的理解和使用
StampedLock介绍 StampedLock是为了优化可重入读写锁性能的一个锁实现工具,jdk8开始引入 相比于普通的ReentranReadWriteLock主要多了一种乐观读的功能 在API ...
- 「 神器 」在线PDF文件管理工具和图片编辑神器
每天进步一丢丢,连接梦与想 在线PDF文件管理工具 完全免费的PDF文件在线管理工具,其功能包括:合并PDF文件.拆分PDF文件.压缩PDF文件.Office文件转换为PDF文件.PDF文件转换为JP ...
- 大叔 EF 来分析 EntityFrameworks.Data.Core 2
Extensions 1DbCommand拦截器扩展DbCommandInterceptorExtensions 2Class for IQuerable extensions methods Inc ...
- 将一条路由约束到一组指定的值 约束路由 URL路由