0

Tengo el siguiente problema, no puedo eliminar los espacios que tengo entre dos divs e inputs

introducir la descripción de la imagen aquí

estoy utilizando bootstrap el código para los inputs es el siguiente:

<input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0" title="pendiente"> 

La intención es hacer que estos inputs parezca una tabla

 <div class="container-with-scroll-horizontal square-corners no-shadow" id="tablePresupuestos">
    <div class="row-with-scroll-horizontal">
        <div class="col-3 p-1">Desarrollo / Ubicación</div>
        <div class="col-3 p-1">Insumos</div>
        <div class="col-sm-8 col-8 col-md-4 p-1">Enero</div>
        <div class="row-with-scroll-horizontal">
            <div class="col-sm-2 col-2 col-md-1 p-1">Sem - 1</div>
            <div class="col-sm-2 col-2 col-md-1 p-1">Sem - 2</div>
            <div class="col-sm-2 col-2 col-md-1 p-1">Sem - 3</div>
            <div class="col-sm-2 col-2 col-md-1 p-1">Sem - 4</div>
        </div>
    </div>
    <div class="row-with-scroll-horizontal">
        <div class="autocomplete p-0 col-3" style="display: block;">
            <input class="form-control form-control-sm name-development" title="Desarrollo o ubicación">
            <div id="autocomplete-items1" class="autocomplete-items autocomple-items-1"></div>
        </div>
        <div class="autocomplete col-3 p-0">
            <input class="form-control form-control-sm name-insumos" id="myInput" title="nombre de los insumos">
            <div id="autocomplete-items2" class="autocomplete-items"></div>
        </div>
        <input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0" title="pendiente">
        <input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0" title="pendiente">
        <input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0" title="pendiente">
        <input class="form-control form-control-sm col-sm-2 col-2 col-md-1 m-0" title="pendiente">
    </div>
    <div id="finTabla"></div><br><br><br><br><br><br></div>
</div>

Este el css

 .square-corners input{
    border-radius: 0!important;
    }

.no-shadow input:focus {
    box-shadow: none;
}

.container-with-scroll-horizontal {
    overflow-x: auto;
    white-space: nowrap;
}

.row-with-scroll-horizontal > * {
    display: inline-block!important;
    float: none;
}

el problema es el de la siguiente ruta https://codepen.io/epifanioperezr/pen/jQRboZ

8
  • prueba quitando m-0; aunque si quieres realizar una tabla, deberías usar el tag <table></table> para ello no? Commented el 5 dic. 2018 a las 18:41
  • Muchas gracias por el comentario, ya intente con el m-0, para este caso no me conviene usar un table Commented el 5 dic. 2018 a las 18:45
  • Entiendo :).. Te funciono quitando el atributo m-0? Commented el 5 dic. 2018 a las 18:46
  • No, no me funciono, ademas cuando selecciono los input pareciera como si hubiera en espacio en medio de ellos Commented el 5 dic. 2018 a las 18:48
  • Puedes incluir toda la estructura de tu HTML? con los divs incluidos? Commented el 5 dic. 2018 a las 18:48

1 respuesta 1

1

Podría servirte algo así:

input {
  display: block !important; 
  padding: 0 !important; 
  margin: 0 !important;  
  width: 100% !important; 
  border-radius: 0 !important; 
  line-height: 1 !important;
}

td {
  margin: 0 !important; 
  padding: 0 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container mt-3">
  <table style="border:none;">
    <thead>
      <tr>
        <th>Desarrollo / Ubicación</th>
        <th>Insumos</th>
        <th>Enero</th>
        <th>Sem - 1</th>
        <th>Sem - 2</th>
        <th>Sem - 3</th>
        <th>Sem - 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
        <td><input type="text" class="form-control" /></td>
      </tr>
    </tbody>
  </table>
</div>

Si bien, tuve que agregar otros estilos, se acerca un poco a lo que podrías necesitar.

Nos comentas

Tu Respuesta

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

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