JSFiddle - React, Tailwind, and code Playground

by matake

HTML

<div id="contenedor_principal">
	<div id="izquierda">
	izquierda

	</div>
	<div id="derecha" class="table">
		<div class="td">
			<div class="table">
				<div class="th">
					<div class="td">id</div>
					<div class="td">nombre_campo</div>
					<div class="td">alias_campo</div>
				</div>
				<div class="tr">
					<div class="td">1</div>
					<div class="td">nombre_campo_uno</div>
					<div class="td">A</div>
				</div>
				<div class="tr">
					<div class="td">2</div>
					<div class="td">nombre_campo_segundo</div>
					<div class="td">B</div>
				</div>
				<div class="tr">
					<div class="td">3</div>
					<div class="td">nombre_campo_tercero</div>
					<div class="td">C</div>
			</div>	
				<div class="tr">
					<div class="td">n</div>
					<div class="td">nombre_campo ... n</div>
					<div class="td">N</div>
				</div>					
			</div>
		</div>
	</div>
</div>
<div>Lo que intento hacer es centrar horizontalmente la tabla de la derecha en su contenedor #derecha al que se esta viendo el border a la derecha de la tabla
</div>

CSS

#contenedor_principal{
		width:650px;
		display:inline-block;
	}
	#izquierda{
		float:left;
		width:200px;
		height:200px;
		border:solid 1px
	}
	#derecha{
		width:400px;
		float:left;
	}
	.table{
		display: table;
		border-collapse:collapse;
		border-color:#f4bebe;
		align:center;
		text-align:center;
		width:100px;
		
	}
	.th .td{
		border: solid 1px #420000;
		font-weight: bold;
		background:rgba(0, 148, 32, 0.56);
	}
	.th, .tr{
		display:table-row;
	}
	.td{
		display: table-cell;
		border: solid 1px #f4bebe;
		max-width: 300px;
		height: 20px;
		overflow:hidden;
	}