4

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:

introducir la descripción de la imagen aquí

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">&times;</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>

1 respuesta 1

3

Lo que pasa es que el espacio de 4 columnas que le estás asignando a la primer tabla es demasiado pequeño para contenerla, es por eso que la segunda tabla se monta sobre la primera, esto puedes verlo utilizando el inspector de elementos.

introducir la descripción de la imagen aquí

Te recomiendo como solución simplemente dividir el espacio de la modal en dos, es decir usar 6 columnas para cada tabla:

*Revisa el ejemplo en pantalla completa.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Modal -->
  <div class="modal show" 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">&times;</button>
          <strong><h4 class="modal-title">Precio de Venta</h4></strong>
        </div>
        <div class="modal-body">
          <div class="row">
          	<div class="col-sm-6">
          		<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>

1
  • 1
    Ya hice los cambios y ya no están empalmadas, de hecho quedo muy bien la division, muchas gracias! Mi asunto era que la tabla de la izquierda debia ser una tabla pequeña, por eso le daba esos valores a los col-sm Pero de igual manera solucione mi problema, muchisismas gracias! el 15 jul. 2019 a las 18:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.