代码如下
<!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>