JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="panel-group">
	<div class="panel panel-primary">
		<div class="panel-heading">
			<span class="panel-subtitle">Title</span>
		</div>
		<div class="panel-collapse collapse in">
			<div class="panel-body">
				<div class="col-md-12" style="padding: 0px;">
					<table class="table table-striped" style="margin-bottom: 0px;">
						<thead>
							<tr>
								<th>A</th>
								<th>B</th>
								<th>C</th>
								<th>D</th>
								<th>E</th>
								<th>F</th>
								<th>G</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>ContentA</td>
								<td>ContentB</td>
								<td>ContentC</td>
								<td>ContentD</td>
								<td>ContentE</td>
								<td>ContentF</td>
								<td class="expand">
									<p>Sub-title</p>
									<div class="panel panel-primary">
										<div class="panel-heading">
											<span class="panel-title semquebra menor">Sub-sub-title</span>
										</div>
										<div class="panel-body menor">
											<table class="table table-condensed">
												<tr>
													<td colspan="2">
														Inner text	
													</td>
												</tr>
											</table>
										</div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

body{
    padding: 20px;
    background-color: #ffffff;
}


.panel-body {
	padding: 0px; /*Works, but set it to 0 and it doesn't works*/
	background-color: #ffffff;
    border-radius: 4px;
}

.table-striped>tbody>tr:nth-child(odd) { background: none;
}

.table>tbody>tr>td { background-color: #f9f9f9;
border-radius: 4px;
}