html+css实现多层表格嵌套

很多时候我们要的表格并不是一级的,有时候可能会有两级或者三级,就像这样的表格:

html+css实现多层表格嵌套_第1张图片

如果用div来写的话,对宽高不好控制,当然如果数据好处理,我们都会用一个table通过合并行或合并列来制作,但有时候我们的数据需要根据前一列来确定后面列的数据,不确定合并的数值,这里我们用合并行或者合并列就不好处理了,最好的就是选择嵌套table,这样就可以适应各种数据。当然,这里table的嵌套样式也是需要注意的,下面用一个简单的例子来画下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
	table{  text-align:center;border-collapse: collapse; padding:0; margin:0; }
	.outTable{width: 100%;height: auto;}
	.inTable{ width:100%; height:100%;}
	.outTable td{border: 1px solid #ccc;}	
	.div{ width:600px; height:auto;}
</style>
</head>
<body>
<div class="div">
<table class="outTable">
	<thead>
		<tr>
			<td width="160px" >班级名称</td>
            <td width="150px">学生名称</td>
            <td width="150px">课程名称</td>
            <td >课程成绩</td>
       </tr>
	</thead>
	<tbody >
		<tr>
			<td >信息与计算科学1班</td>
			<td colspan="4">
				<table  frame="void" class="inTable">
					<tr>
						<td width="149px" >张三</td>
						<td  colspan="3">
							<table frame="void"   class="inTable">
								<tr>
									<td width="149px" >高等数学</td>
									<td  >80</td>										
								</tr>
								 <tr>
									<td >大学英语</td>
									<td >85</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td width="149px">李四</td>
						<td colspan="3">
							<table  frame="void" class="inTable">
									<tr>
									<td  width="149px">基础物理</td>
									<td  >80</td>
								</tr>
								<tr>
									<td >形式政治</td>
									<td >80</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</tbody>
</table>	
</div>

</body>
</html>

上面的html画出来的就是上面那副图的效果,html中相关说明

frame="void"   去掉table的外边框

border-collapse: collapse;  合并table内的边框

这里如果table中缺少frame='void'效果就会是这样:

html+css实现多层表格嵌套_第2张图片

这里的frame属性可以根据不用的需要取不同值来单独去掉上,下,左,右外边框



你可能感兴趣的:(html,css,web前端,table,表格嵌套)