html+css实现多层表格嵌套

最新推荐文章于 2024-08-19 09:56:27 发布

凌晨1点21分

最新推荐文章于 2024-08-19 09:56:27 发布

阅读量1.3w

点赞数 4

分类专栏： web前端文章标签： HTML table 表格嵌套 web前端 CSS

本文链接：https://blog.csdn.net/cb2474600377/article/details/45533555

版权

web前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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

如果用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'效果就会是这样：