table自定义表格样式

前言：

自定义表格样式，有一些自定义的需求，整理成通用样式就可以复用了

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>

效果

table自定义表格样式

猜你喜欢