1. 程式人生 > >table自定義表格樣式

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>

效果