JSFiddle - React, Tailwind, and code Playground

by jack2ky

HTML

<body>
	<table>
		<tr>
			<th>one</th>
			<th>two</th>
			<th>three</th>
			<th>four</th>
		</tr>
		<tr>
			<td><div class = "innerWrapper">td1<div class = "target">T</div></div></td>
			<td>td2</td>
			<td>td3</td>
			<td>td4</td>
		</tr>
	</table>
		<script>
<!-- 			$(document).ready(function(){
				tdh = $('td:nth-child(1)').outerHeight()
				alert("td"+ tdh);
				var inner = $('.innerWrapper').outerHeight(tdh);
				alert(inner);
			}); -->
		</script>
</body>

CSS

td,th{
			padding: 20px 30px;
		}
		.innerWrapper{
			position:relative;
			height: 100%;
			width:100%;
		}
		.target{
			position: absolute;
			top:0;
			left: 0;
			background-color: blue;
		}
		td:nth-child(1){
			background-color: yellow;
		}