前言：
自定义表格样式，有一些自定义的需求，整理成通用样式就可以复用了
1，table表格每一列可以自定义宽度
2，table表格每一列中的每一项超出宽度不换行并显示省略号...
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style>
.useclick {
cursor: pointer;
}
.table {
min-height: 290px;
width: 100%;
}
.table .tr {
line-height: 32px;
}
.table .thead .tr {
background: #75B2C7;
}
.table .tbody .tr {
background: rgba(0, 0, 0, .4);
margin-top: 2px;
}
.table .tbody .tr:hover {
background: rgba(0, 0, 0, .5);
}
.table p {
display: inline-block;
vertical-align: middle;
color: #fff;
height: 22px;
text-align: center;
line-height: 22px;
border-right: 1px solid #A8CDDD;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.table p:last-child {
border: 0;
}
</style>
</head>
<body>
<div class="tablebox">
<div class="table table_index">
<div class="thead">
<div class="tr"></div>
</div>
<div class="tbody"><div class="tr"><p class="w0">sdh</p><p class="w1">男</p><p class="w2" title="超幸福哦超幸福哦超幸福哦">超幸福哦</p></div><div class="tr"><p class="w0">sdh</p><p class="w1">男</p><p class="w2">超幸福哦</p></div></div>
</div>
</div>
<script src="js/common/jquery.min.js"></script>
<script>
var SDHF = SDHF || {};
SDHF.showHead = function(theadarr, obj) { //显示表头
var theadhtml = '';
for(var i = 0, len = theadarr.length; i < len; i++) {
theadhtml += '<p class="w' + i + '" title="' + theadarr[i] + '">' + theadarr[i] + '</p>';
}
$(obj).html(theadhtml);
};
SDHF.showW = function(warr) { //显示表格每一项宽度
for(var i = 0, len = warr.length; i < len; i++) {
$(".w" + i).css("width", warr[i] + '%');
}
};
var shtml = '';
for(var i=0,len=3;i<len;i++){
shtml+='<div class="tr"><p class="w0">sdh</p><p class="w1" title="搬砖搬砖搬砖搬砖搬砖搬砖搬砖搬砖搬砖">搬砖搬砖搬砖搬砖搬砖搬砖搬砖搬砖搬砖</p><p class="w2">59</p></div>'
}
$(".table_index .tbody").html(shtml);
var theadarr = ['姓名','专业','分数'];
SDHF.showHead(theadarr, $(".table_index .thead .tr")); //显示表头
var warr = [10,10,80];
SDHF.showW(warr); //每列宽度
</script>
</body>
</html>效果
