整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、遇问题：
产品说：“这张表我想在手机端显示。”
我：“显示不了，手机屏幕太窄了，好多数据无法显示。”
一个小时后......
产品说：“要不你弄个滑动吧，我左右滑动查看”
我：“好的”（竟然被你想到了！！！）
N个小时后.....
产品说：“我向下滑动看不到标题了”
我：“那我在把标题固定住。。。。”
一张列表中需要展示多行多列数据，页面太小，又要支持手机端。
二、解决思路：
1.CSS中有overflow属性可以对溢出元素进行隐藏
2.构建4个table,图中1.“公司/日期”2.时间 3.公司 4.数据内容
3.通过监听右边滚动条滑动距离控制第3个table
3.通过监听下边滚动条滑动距离控制第2个tablesasasasa
三、伪代码
<div style="">
<div id="div1">
<table >
</table>
</div>
<div id="div2">
<table style="width:12900px;">
</table>
</div>
<div id="div3">
<table>
</table>
</div>
<div id="div4">
<table id="table1" style="width:12900px;">
</table>
</div>
</div>
<script>
$('#table1').parent("div").each(function () {
$(this).data({sl: this.scrollLeft, st: this.scrollTop});
}).scroll(function () {
var sl = this.scrollLeft, st = this.scrollTop;
$("#div2").scrollLeft(sl);
$("#div3").scrollTop(st);
});
</script>
四、解析
这种适用于简单表格固定表头首列，滚动条高度是17px，当我们设置表格宽度和高度时候要注意这个高度，不然会错位。
演示地址：
[演示地址](http://47.105.36.188:3030/toutiao/CSS实现的Table表头固定/index.html)
[源代码下载](https://github.com/harryluo163/toutiao/tree/master/CSS实现的Table表头固定)
格如何改变里面的文字方向呢，下面小编用常用的Speedoffice简单教一下大家，希望能帮到大家。
1，首先，运行speedoffice软件，新建一份表格，并输入文字作为示例演示。
2，再单击选中单元格，右侧可以看到“文字方向”字样。
3，然后在“文字方向”下面输入角度，再按回车键确定或者是直接点击上下箭头调整具体角度。
4，也可以直接点击“主页”下方“选项”的下拉菜单进行设置。
. 表格属性
属性名称用途取自border-collapse设置或检索表格的行和单元格的边是合并还是独立。separate： 边框独立 collapse： 相邻边被合并border-spacing边框独立时，单元格与单元格之间的间距数字，不允许负值empty-cells设置或检索当表格的单元格无内容时，是否显示该单元格的边框。hide：隐藏该单元格的边框。 show：显示该单元格的边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格属性</title>
<style>
.separate{
width: 200px;
height: 200px;
border-collapse:separate;
border-spacing:10px;
empty-cells: hide;
}
</style>
</head>
<body>
<table border="1" class="separate">
<tr id="tr1">
<td>separate--边框独立</td>
<td>separate--边框独立</td>
<td>separate--边框独立</td>
</tr>
<tr>
<td>collapse--相邻边被合并</td>
<td>collapse--相邻边被合并</td>
<td></td>
</tr>
</table>
</body>
</html>
2. 布局属性
属性名称用途取值display设置或检索对象是否及如何显示。none： 隐藏对象。不为被隐藏的对象保留其物理空间
block： 指定对象为块元素visibility定义了元素是否可见visible： 设置对象可视 保留物理空间
hidden： 设置对象隐藏
collapse： 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。float定义了元素向左或者向右浮动放置none： 设置元素不浮动
left： 设置元素浮在左边
right： 设置元素浮在右边
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
<style>
.table{
width: 300px;
height: 300px;
background-color: red;
display: block;
}
img{
width: 300px;
height: 300px;
visibility: visible;
}
</style>
-->
<style>
.test{
width: 300px;
height: 300px;
float: right;
background-color: red;
}
.table{
width: 300px;
height: 300px;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div class="test">我将出现在屏幕右方1</div>
<div class="table">我将出现在屏幕右方2</div>
<br>
<img src="css1.jpg"/>
</body>
</html>
3. 定位属性
属性名称用途取值position指定一个元素在文档中的定位方式。static：默认。
relative:相对定位[对象遵循常规流,不会影响常规流中的任何元素]
absolute：绝对定位 [对象脱离常规流]top定义了元素的上外边距边界与其包含块上边界之间的偏移数字，不允许负值right定义了元素的右外边距边界与其包含块右边界之间的偏移数字，不允许负值bottom定义了元素的底外边距边界与其包含块底边界之间的偏移数字，不允许负值left定义了元素的左外边距边界与其包含块左边界之间的偏移数字，不允许负值z-index定义一个元素在文档中的层叠顺序数字【数值越大就会在最上面】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
<style>
#div1{
width: 200px;
height: 300px;
background-color: red;
position: absolute;
top: 100px;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
-->
<style>
#test1,#test2,#test3,#test4 {
position: absolute;
width: 200px;
height: 100px;
padding: 5px 10px;
color: #fff;
text-align: right;
}
#test1{
z-index: 1;
font-size: 10px;
background-color: red;
}
#test2{
z-index: 2;
font-size: 10px;
top: 30px;
left: 30px;
background-color: blue;
}
#test3{
z-index: 3;
font-size: 10px;
top: 60px;
left: 60px;
background-color: black;
}
#test4{
z-index: 4;
font-size: 10px;
top: 90px;
left: 90px;
background-color: yellow;
}
</style>
</head>
<body>
<!--
<div id="div1">
</div>
<div id="div2">
</div>
-->
<div id="test1">z-index:1</div>
<div id="test2">z-index:2</div>
<div id="test3">z-index:3</div>
<div id="test4">z-index:4</div>
</body>
</html>
变换属性设置
2D Transform Functions：
matrix()： 【矩阵变换】以一个含数值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
rotate()指定对象的2D rotation（2D旋转），需先有 <’’ transform-origin '> 属性的定义
3D Transform Functions：
matrix3d()： 以一个4x4矩阵的形式指定一个3D变换
translate3d()：
指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
rotate3d()： 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
scale3d()： 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
*请认真填写需求信息，我们会在24小时内与您取得联系。
