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> ...
随机推荐
- python基础操作以及变量运用
今天学习关于pycharm的操作以及变量的知识 1.关于pycharm的基本操作,作为一个小白,仪式感还是要有 在基础界面上新建然后打印hello world,也是对python的一种尊重吧 2.关于 ...
- k8s内运行ubuntu容器
k8s内运行ubuntu镜像 环境 互相能访问的4台机器master,node01,node02,node03,4核心,内存8G 使用root操作 安装k8s 在master安装docker.kube ...
- APICloud开发者进阶之路 |iOS修改entitlements文件
本文出自APICloud官方论坛, 感谢论坛版主 技术咨询-Kenny 的分享. 一.概述iOS原生开发中若要实现某些特殊功能,如使用HealthKit.实现Universal Links等.需要 ...
- 最大区间和变形 - codeforces
题意 : 可以选择操作一串区间,将区间内的某一个数全部变成一个新的数字,询问整个区间中某个数字的出现次数总共有多少个? 思路分析 : 首先最后选的一定是一个区间,然后 ans = cnt(1, l-1 ...
- 线段树 or 并查集 （多一个时间截点）
There is a company that has N employees(numbered from 1 to N),every employee in the company has a im ...
- 如何优雅的用策略模式，取代臃肿的 if-else 嵌套，看这篇就够了
经常听同事抱怨,订单来源又加了一种,代码又要加一层if-else判断,光判断订单来源的if-else就好几百行代码,代码我都不想看了,相信很多同行都有过这样的感受! Java的二十几种设计模式背的滚瓜 ...
- Java单体应用 - Markdown - 02.基础语法
原文地址:http://www.work100.net/training/monolithic-markdown-basic.html 更多教程:光束云 - 免费课程 基础语法 序号 文内章节 视频 ...
- Beat our dice game and get the flag 击败我们的骰子游戏拿到旗子
文件名:ebCTF-Teaser-BIN100-Dice.exe 话不多说 用PEID一看没壳 拖进OD 让我们摇出31337这五个数字才能拿到正确的flag cmp dword ptr ss:[eb ...
- 机器学习-MNIST数据集使用二分类
一.二分类训练MNIST数据集练习 %matplotlib inlineimport matplotlibimport numpy as npimport matplotlib.pyplot as p ...
- C++ lambda 分析
lambda 表达式分析 构造闭包:能够捕获作用域中变量的匿名函数的对象,Lambda 表达式是纯右值表达式,其类型是独有的无名非联合非聚合类类型,被称为闭包类型(closure type),所以在声 ...