简单table样式记录demo

demo: 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<style type="text/css">
		.th-div,.th-in{
			width:100px;
			height: 50px;
		}
		.td-div,.td-in{
			width: 250px;
    		height: 70px;
    		font-size: 14px;
		}
		/*
		.th-div,.td-div{
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			cursor: pointer;
		}
		*/
		.th-div,.td-div{
			table-layout: fixed;
		    white-space: normal;
		    word-break: break-all;
		    width: 100%;
		    overflow: hidden;
		    height: 60px;
		}
		/*
		.th-in,.td-in{
			overflow: hidden;
		}*/
		/* 布局 */
		.t-left,.t-centrel,.t-right{
			float: left;
		}
		.t-left,.t-right{
			height: 10px;
			width: 200px;
		}

	</style>
</head>
<body>
	<div>
		<div class="t-left">
			<!-- left -->
		</div>
		<div class="t-centrel">
			<table border="1" cellpadding="10" cellspacing="0">
				<thead>
					<tr>
						<td class="th-in"><div class="th-div">header1</div></td>
						<td class="th-in"><div class="th-div">header1</div></td>
						<td class="th-in"><div class="th-div">header1</div></td>
						<td class="th-in"><div class="th-div">header1</div></td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="td-in"><div class="td-div">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div></td>
						<td class="td-in"><div class="td-div">222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</div></td>
						<td class="td-in"><div class="td-div">33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div></td>
						<td class="td-in"><div class="td-div">4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</div></td>
					</tr>
					<tr>
						<td class="td-in"><div class="td-div">5555555555555555555555555555555555555555555555555555555555555555555555555555555555555555</div></td>
						<td class="td-in"><div class="td-div">66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666</div></td>
						<td class="td-in"><div class="td-div">777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777</div></td>
						<td class="td-in"><div class="td-div">8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888</div></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="t-right">
			<!-- right -->
		</div>
	</div>
	
</body>
</html>

picture:

发布了9 篇原创文章 · 获赞 10 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/wynwdblh/article/details/104146073