1

Quiero hacer que una tabla se ponga a lado de otra tabla, a la primera tabla no le agregué nada de estilo de posicionamiento, a la segunda intenté escribiendo:

<table class="table table-dark" style="position:absolute; top:23px; left:20px;" >

Pero no me funciona, incluso se empalma e intenté moviéndole los px y ahí ir calculando, pero de ahí no se puede sin importar, adjunto la imagen:

t

1
  • 1
    Estimado, por favor deja tu código como un ejemplo mínimo verificable para poder ayudarte con mas claridad
    – harifo
    Commented el 2 oct. 2019 a las 12:03

3 respuestas 3

3

una forma de hacerlo es manejando div y creando una fila con dos columnas:

<div class="row">
<div class = "col-sm-6">
<!--aqui va la primera tabla-->
</div>
<div class = "col-sm-6">
<!--aqui va la segunda tabla-->
</div>
</div>

o de esta otra forma:

<div style="float:left;">
    <table>
      <tr><td>primera tabla</td></tr>
      <tr><td>primera tabla</td></tr>
    </table>
</div>
<div style="float:left;">
    <table>
      <tr><td>segunda tabla</td></tr>
      <tr><td>segunda tabla</td></tr>
    </table>
</div> 

2
  • No funciono, lo descuadro todavia mas
    – n00bz
    Commented el 1 oct. 2019 a las 20:47
  • Entonces creo que tu problema debe ser divs que no estan cerrados, o alguna celda de la tabla que no cerraste. podrias poner tu codigo por favor. Commented el 1 oct. 2019 a las 21:40
3

Prueba este snippet tienes que agregar un contenedor row 2 y dentro otros dos de 6 md cada uno si utilizas boostrap.

Para que puedas ver mejor el resultado te recomiendo que le des a la opción ver pagina completa o Ampliar.

Espero te sea de ayuda.

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

<div class="row mb-2">
    <div class="col-md-6">
  <table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

</div>
<div class="col-md-6">
 <table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>
</div>

1

Si no agregas un estilo de posicionamiento, por defecto es relative. Si a una tabla le pones absolute y la posicionas, a la otra también debes ponérselo porque si no te ocurre eso, la posicionada con absolute se coloca sobre la otra a la distancia de píxeles que le especificas.

Otra solución es poner en las dos tablas position:relative; y float:left; de esta forma, se colocará una seguida de la otra.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alinear tablas</title>
</head>

<body>
    
    <table class="" style="position:relative; top:23px; left:20px; background-color:#459A1E; width:200px; height: 200px; float: left;"></table>
    <table class="" style="position:relative; top:23px; left:20px;  background-color:#AC1C1E; width: 200px; height: 200px; float: left;"></table>
</body>
</html>

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.