Full height table inside table cell

by Christian Unigarro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-bordered table-striped table-conf">
	<theader>
		<tr>
			<th style="width: 25%;">
				Title 1
			</th>
			<th style="width: 25%;">
				Title 2
			</th>
			<th style="width: 25%;">
				Title 3
			</th>
			<th style="width: 25%;">
				Title 4
			</th>
		</tr>
	</theader>
	<tbody>
		<tr>
			<th rowspan="1">
				Subtitle 1
			</th>
			
			<td colspan="4" class="table-wrapper">
				<table class="table-bordered">
					<tbody>
						<tr>
							<td>
								Contenido 1
							</td>
							<td>
								Contenido 2
							</td>
							<td>
								Contenido 3
							</td>
						</tr>
						
						<tr>
							<td>
								Contenido 1
							</td>
							<td>
								Contenido 2
							</td>
							<td>
								Contenido 3
							</td>
						</tr>
						
						<tr>
							<td>
								Contenido 1
							</td>
							<td>
								Contenido 2
							</td>
							<td>
								Contenido 3
							</td>
						</tr>
					</tbody>
				</table>
			</td>
			
		</tr>
		<tr>
			
			<th rowspan="1">
				Subtitle with words words words words 2
			</th>
			<td colspan="4" class="table-wrapper">
				<table class="table-bordered" style="background-color: pink;">
					<tbody>
						<tr>
							<td>
								Contenido 1
							</td>
							<td>
								Contenido 2
							</td>
							<td>
								Contenido 3
							</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</tbody>
</table>

SCSS

.table-conf theader tr th {
	width: 25%;
	color: red !important;
}

.table-wrapper {
	padding: 0 !important;
}
.table-wrapper table {
	width: 100%;
}
.table-wrapper table tbody tr td {
	width: 33.33333%;
	padding: 8px;
}