En mi sistema Web utilizo bootstrap para todo el diseño del sistema, tengo un botón que acciona un modal el cual debe mostrar 2 tablas con información, pero al momento de colocar las tablas, me las empalma de la siguiente manera:
Quiero destacar que estas tablas están dentro de un Modal utilice col-sm-4
y col-sm-8
para cada tabla y hacer la división. Aquí el código de mi Modal
<!-- Modal -->
<div class="modal fade" id="myModal45" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<strong><h4 class="modal-title">Precio de Venta</h4></strong>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<strong>Mano de Obra:</strong>
<br/>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th class="text-center">Departamentos</th><td class="text-center">Personas</td><td class="text-center">Horas</td><td class="text-center">Total</td>
</tr>
</thead>
<tbody>
<tr>
<th class="text-center">Corte:</th><td class="text-center"><input size="2" type="" name=""></td><td class="text-center"><input size="2" type="" name=""></td><td class="text-center"><input size="2" type="" name="" disabled="true"></td>
</tr>
<tr>
<th class="text-center">Soldadura:</th><td class="text-center"><input size="2" type="" name=""></td><td class="text-center"><input size="2" type="" name=""></td><td class="text-center"><input size="2" type="" name="" disabled="true"></td>
</tr>
<tr>
<th class="text-center">Pintura:</th><td class="text-center"><input size="2" type="" name=""></td><td class="text-center"><input size="2" type="" name=""></td><td class="text-center"><input size="2" type="" name="" disabled="true"></td>
</tr>
<tr>
<th class="text-center">Ensamble:</th><td class="text-center"><input size="2" type="" name=""></td><td class="text-center"><input size="2" type="" name=""></td><td class="text-center"><input size="2" type="" name="" disabled="true"></td>
</tr>
<tr>
<th class="text-center">Costura:</th><td class="text-center"><input size="2" type="" name=""></td><td class="text-center"><input size="2" type="" name=""></td><td class="text-center"><input size="2" type="" name="" disabled="true"></td>
</tr>
<tr>
<th class="text-center">Otros:</th><td class="text-center"><input size="2" type="" name=""></td><td class="text-center"><input size="2" type="" name=""></td><td class="text-center"><input size="2" type="" name="" disabled="true"></td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-6">
<table class="table table-bordered table-striped table-hover">
<tbody>
<tr>
<th class="text-center">Tipo de Cambio</th><td class="text-center"><input size="2" type="" name=""></td>
</tr>
<tr>
<th class="text-center">Materia Prima</th><td class="text-center"><input size="2" type="" name="" disabled="true"></td>
</tr>
<tr>
<th class="text-center">Scrap 2%</th><td class="text-center"><input size="2" type="" name="" disabled="true"></td>
</tr>
<tr>
<th class="text-center">Mano de Obra</th><td class="text-center"><input size="2" type="" name="" disabled="true"></td>
</tr>
<tr>
<th class="text-center">Indirectos 12%</th><td class="text-center"><input size="2" type="" name="" disabled="true"></td>
</tr>
<tr>
<th class="text-center warning">SUBTOTAL</th><td class="text-center warning"><input size="2" type="" name="" disabled="true"></td>
</tr>
<tr>
<th class="text-center">Utilidad 20%</th><td class="text-center"><input size="2" type="" name="" disabled="true"></td>
</tr>
<tr>
<th class="text-center success">TOTAL</th><td class="text-center success"><input size="2" type="" name="" disabled="true"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>