html Bootstrap 4a手风琴（折叠）表

Posted 2021-05-11

.table-responsive {
    .table {
        .accordion-cell {
            padding: 0 !important;
            border: 0;
            .in {
                border-top: 1px solid #eceeef;
            }
        }
    }
}

<div class="table-responsive">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Published</th>
					<th>Comment Date</th>
				</tr>
			</thead>
			<tbody>
				<!-- Begin table row -->
				<tr data-target="#accordion" data-toggle="collapse">
					<!-- table-cells here -->
				</tr>
				<tr>
					<td class="accordion-cell" colspan="5">
						<div class="collapse" id="accordion" role="tabpanel">
							HIDDEN STUFF
						</div>
					</td>
				</tr><!-- / table row -->
				<!-- Begin table row -->
				<tr data-target="#accordion-2" data-toggle="collapse">
					<!-- table-cells here -->
				</tr>
				<tr>
					<td class="accordion-cell" colspan="5">
						<div class="collapse" id="accordion-2" role="tabpanel">
							HIDDEN STUFF
						</div>
					</td>
				</tr><!-- / table row -->
			</tbody>
		</table>
	</div>