<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>自定义表格模板</title>
<style>
html {
background: #02234C;
}
#bar1con3 {
width: 700px;
height: 260px;
border: 1px solid red;
overflow: auto;
}
.table {padding: 6px 8px 5px;box-sizing: border-box;color: #fff;}
.thead .tr .th,.tbody .tr .td {display: inline-block;text-align: center;}
.thead .tr .th {line-height: 26px;background: #098CF8;}
.tbody .tr {margin-top: 3px;cursor: pointer;}
.tbody .tr:nth-child(even) .td {background: #0C3165;}
.tbody div.act {background: #B6DDF9;}
.tbody .tr .td {line-height: 27px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
</style>
</head>
<body>
<div id="bar1con3">
</div>
<script src="js/common/jquery.min.js"></script>
<script>
var SDHF = SDHF || {};
SDHF.showHead = function(_thisid,theadarr) {//显示表头
var theadhtml='';
for(var i=0,len=theadarr.length;i<len;i++){
theadhtml+='<div class="th w'+i+'">'+theadarr[i]+'</div> ';
}
$(_thisid).find('.thead .tr').html(theadhtml);
};
SDHF.showW = function(_thisid,warr) {//显示表格每一项宽度
for(var i=0,len=warr.length;i<len;i++){
$(_thisid).find(".w"+i).css("width",warr[i]+'%');
}
};
</script>
<script>
show1()
function show1() {
var _thisid = "#bar1con3";
var shtmltable = '';
shtmltable = '<div class="table">' +
' <div class="thead">' +
' <div class="tr">' +
' </div>' +
' </div>' +
' <div class="tbody">' +
' <div class="tr">' +
' </div>' +
' </div>' +
' </div>';
$(_thisid).html(shtmltable);
var headarr = ['反映人', '时间', '受理内容', '诉求分类', '办理部门'];
SDHF.showHead(_thisid, headarr); //显示项——表头
var warr = [10, 20, 30, 18, 19];
var shtml = '';
for(var i = 0, len = 20; i < len; i++) {
shtml += '<div class="tr" id="' + i + '">' +
' <div class="td w0">张三</div><div class="td w1">' +
' 2018025.25 12:23</div>' +
' <div class="td w2">某街道交通拥堵</div>' +
' <div class="td w3">诉求</div>' +
' <div class="td w4">市城管执法局</div>' +
' </div>';
}
$(".tbody").html(shtml);
SDHF.showW(_thisid, warr);
}
</script>
</body>
</html>
效果: