html+css实现多层表格嵌套

最新推荐文章于 2024-02-04 00:00:00 发布

转载最新推荐文章于 2024-02-04 00:00:00 发布 · 4.1k 阅读

css 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用HTML和CSS实现多层表格嵌套的效果，并提供了具体的代码实例。通过*ngFor指令来动态生成表格，同时利用不同的类名区分外层和内层表格，确保样式的一致性和美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html+css实现多层表格嵌套

https://blog.youkuaiyun.com/cb2474600377/article/details/45533555

<div class="result-preview-box clearfix fr">
			<table class="table-outer">
				<tbody *ngFor="let top of allStandards;">
					<tr *ngIf="top.checked">
						<td class="text">{{top.name}}</td>
						<td *ngIf="top.children">
							<table frame="void" class="table-inner">
								<tbody *ngFor="let mid of top.children;">
									<tr *ngIf="mid.checked">
										<td class="text">{{mid.name}}</td>
										<td *ngIf="mid.children">
											<table frame="void" class="table-inner">
												<tbody *ngFor="let btm of mid.children;">
													<tr *ngIf="btm.checked">
														<td class="text">{{btm.name}}</td>
													</tr>
												</tbody>
											</table>
										</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

.result-preview-box {
            table {
                border-collapse: collapse;
                padding: 0;
                margin: 0;
                &.table-outer {
                    width: 99%;
                    height: auto;
                    td {
                        border: 1px solid #d8d8d8;
                    }
                }
                &.table-inner {
                    width: 100%;
                    height: 100%;
                }
                td.text {
                    text-align: center;
                    width: 146px;
                    line-height: 40px;
                    &:hover {
                        background: #f8eeee;
                    }
                }
            }
        }