介绍
- 1.创建一个div
- 2.把代码放入
- 3.修改对应的俩个参数
- 4.tbody高度
- 5.自适应宽度用自动出来的calss
- 6.ok
效果
实例
<html>
<head>
<title>New Document</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
::-webkit-scrollbar {
width: 1px; /*对垂直流动条有效*/
height: 10px; /*对水平流动条有效*/
}
/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: rosybrown;
border-radius: 3px;
}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
border-radius: 7px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #E8E8E8;
}
/*定义两端按钮的样式*/
::-webkit-scrollbar-button { background-color:#E8E8E8; }
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner { background:khaki; }
body {padding: 100px 0 0 100px;}
/** 如果有div再如下几个加上 前边的div id or class*/
/* text-align*/
table{text-align:center;}
/* width display*/
table thead{ width: 600px;display:block; }
/* width height display overflow 这里的宽高不用关心会被下边的js替换掉*/
table tbody{width: 600px;height: 100px;display:block;overflow: auto;}
/*width border */
table tbody tr td{border:1px solid #000;height:35px;line-height:35px}
/* width border */
table thead tr th{border:1px solid #000;height:35px;line-height:35px}
#main{
width:600px;
height:200px;
position: relative;
border:1px solid #000;
}
</style>
<body>
<div id="main"></div>
</body>
<script>
//数据替换成自己需要用的数据
var data = [{ "s4": "ss", "s5": "sss", "s6": "ss" },{ "s4": "ss", "s5": "ss", "s6": "ss" },{ "s4": "ss", "s5": "ss", "s6": "ss" },{ "s4": "ss", "s5": "ss", "s6": "ss" },{ "s4": "ss", "s5": "ss", "s6": "ss" }]
//直接把表头和表内全部载入
var addTable = function (data,id) {
var hthead = "";
var htbody = "";
var num = 0;
hthead += '<tr>';//编写表头
for (var j in data[0]) {
hthead += '<th><div class="st'+(++num)+'">' + j + '</div></th>';
}
hthead += '</tr>';
for (i = 0, len = data.length; i < len; i++) {//编写表格
htbody += '<tr>';
num=0;
for (var j in data[i]) {
htbody += '<td><div class="st'+(++num)+'">' + data[i][j] + '</div></td>';
}
htbody += '</tr>';
}
//表格去除空隙
var htable = '<table border="0" cellpadding="0" cellspacing="0"> '
+'<thead></thead>'
+'<tbody></tbody>'
+'</table>';
$(id).empty().html(htable);//添加表格 TODO 如果是直接写入一个div 可以吧 thead and tbody width 和 height 进行更换
$(id+" table thead").empty().html(hthead);//添加内容
$(id+" table tbody").empty().html(htbody);
//基础样式使用css的
var glbwidthid = $(id).width();
var glbheightid = $(id).height();
$(id+" table thead").css("width",glbwidthid+"px");
//设置body 宽高 滚动条会用到下边的减少多少 //TODO 修改1位置
$(id+" table tbody").css({"width":glbwidthid+"px","height":(glbheightid-35)+"px"});
//统一宽度样式
$(id+" table tbody tr td").css("width",(glbwidthid/num*1.0)+"px");
$(id+" table thead tr th").css("width",(glbwidthid/num*1.0)+"px");
//个性化自适应样式 一般情况只需要 //TODO 修改2位置
$(".st1").css("width",(glbwidthid/num*1.0)+"px");
$(".st2").css("width",(glbwidthid/num*0.3)+"px");
$(".st3").css("width",(glbwidthid/num*1.5)+"px");
}
addTable(data,"#main");
</script>
</html>
ok
持续更新
