CSS中的表格三之表格中嵌套表格

最新推荐文章于 2024-05-10 16:40:51 发布

原创最新推荐文章于 2024-05-10 16:40:51 发布 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#CSS 表格嵌套表格

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

HTML与CSS

14 篇文章

订阅专栏

本文详细介绍了如何在HTML中实现表格嵌套，通过具体的代码示例展示了如何在单元格内嵌入子表格，并对CSS样式进行了说明，以实现美观且布局合理的嵌套表格。

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格中嵌套表格</title>
		<!-- 继续学习表格中嵌套表格
		1.只需要在td中在放入一个table即可
	
	 -->

		<style type="text/css">
			
			
			table {
				margin-left: 20px;
				margin-right: 20px;
				border: thin solid black;
				/* 表格标题在表格的下方 */
				caption-side: bottom;
				/* border-spacing: 10px 30px; */
				border-collapse: collapse;
			}
			
			th,
			td {
				border: thin dotted gray;
			}

			th {
				background-color: #00FFFF;
			}

			caption {
				font-style: italic;
				padding-top: 8px;
			}

			.text-center {
				text-align: center;
			}

			.text-right {
				text-align: right;
			}

			.cell-color {
				background-color: #fcba7a;
			}
			/* td th{
				background-color: #FCBA7A;
			} */
			/* 使用子孙选择器 */
			table table th{
				background-color: #FCBA7A;
			}
		</style>
	</head>
	<body>
		<!-- 分析;一共是7行6列 -->
		<div>
			<table style="margin-top: 100px;">
				<tr>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>
					<th>Header</th>

				</tr>
				<tr>
					<td>june16</td>
					<td>75</td>
					<td>1204ft</td>
					<td>29686</td>

				</tr>
				<tr>
					<td>75</td>
					<td>4/5</td>
					<td>4/5</td>
					<td>4/5</td>
				</tr>
				<tr>
					<td>75</td>
					<td>4/5</td>
					<td>4/5</td>
					<td>
						<table >
							<!-- 添加了一个一行两列的表格 -->
							<tr>
								<th>Tess</td>
								<td>5/5</td>
							</tr>
							<tr>
								<th>Tong</td>
								<td>4/5</td>
							</tr>
						</table>
					</td>
				</tr>

			</table>

		</div>
	</body>
</html>