html5 js jquery 实现 table 表格宽度自适应实例1.写页面table2.基础样式3.js写入

介绍

1.写页面table
2.基础样式
3.js写入数据
4.js设置生成class
5.对个全部的class 做宽度设置
6.对个别的class 做宽度设置用* 百分比的方式实现，一个多另一个就少点即可
多个情况进行计算即可

样式

实例

<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>
	body {padding: 100px 0 0 100px;}
	/* text-align*/
	table{text-align:center;}
	/* width  display*/
	table thead{ width: 600px;display:block; }
	/* width height display overflow*/
	table tbody{width: 600px;height: 100px;display:block;overflow: auto;}
	/*width border */
	table tbody tr td{border:1px solid #000;	width:200px; }
	/* width border */
	table thead tr th{border:1px solid #000; width:200px; }
	
</style>
<body>
	<!-- 表格去除空隙 -->
	<table border="0" cellpadding="0" cellspacing="0"> 
			<thead></thead>
			<tbody></tbody>
	</table>
</body>  
<script>

//数据替换成自己需要用的数据
var data = [{  "s4": "ss", "s5": "ss", "s6": "ss" },{  "s4": "ss", "s5": "ss", "s6": "ss" }]

//直接把表头和表内全部载入
var addTableF = function (features) {
	var hthead = "";
	var htbody = "";
	var num = 0;
	hthead += '<tr>';//编写表头
	for (var j in features[0]) {
		hthead += '<th><div class="st'+(++num)+'">' + j + '</div></th>';
	}
	hthead += '</tr>';
	for (i = 0, len = features.length; i < len; i++) {//编写表格
		htbody += '<tr>';
		num=0;
		for (var j in features[i]) {
			htbody += '<td><div class="st'+(++num)+'">' + features[i][j] + '</div></td>';
		}
		htbody += '</tr>';
	}
	$("table thead").empty().html(hthead);
	$("table tbody").empty().html(htbody);
	$(".st1").css("width",(600/4*1.0)+"px");
	$(".st2").css("width",(600/4*0.3)+"px");
	$(".st3").css("width",(600/4*1.8)+"px");
}
addTableF(data);


</script>
</html>

持续更新

html5 js jquery 实现 table 表格宽度 自适应 实例

介绍

样式

实例

html5 js jquery 实现 table 表格宽度自适应实例