0

Estoy teniendo problemas al situar una tabla debajo de otra, las tablas son la siguientes:

Quisiera situar la tabla SALDOS SIGUIENTES debajo de SALDOS

Para la creación de la tabla tengo el siguiente codigo:

@media screen and (max-width: 425px){
  
  div#tablas_saldos {
    display: block;
}

div.saldos {
    display: block;
}

.subtitulo {
    font-weight: bold;
    font-size: medium;
    text-align: center;
    margin: 0px;
}

.table {
    margin-bottom: 0px;
}

span#eliminar-saldo-btn {
    display: block;
    font-size: 20px;
    padding-right: 5px;
    font-family: cursive;
    color: #ab1313;
    font-weight: bold;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 2px;
}

.table>tbody>tr>td {
    vertical-align: middle;
}

#saldo_dias1 {
    vertical-align: middle;
    font-weight: bold;
    font-size: 20px;
}

#saldo_dias {
    vertical-align: middle;
    font-weight: bold;
    font-size: 20px;
}

td.saldossiguientes {
    display: block;
}

div.saldosAnticipados {
    display: block;
}
  
}
<div id="tablas_saldos">
<div>
<table>
<tbody>
  <tr>
    <td class="saldosTabla">
    <h3 class="subtitulo">
    SALDOS
    </h3>
    <div class="saldos">
    <table class="table">
    <thead>
      <tr>
        <th></th>
        <th>Año</th>
        <th>Saldo</th>
        <th>Fecha vencimiento</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <span id="eliminar-saldo-btn" title="Eliminar" style="display: none">x</span>
        </td>
        <td data-title="Año">2020</td>
        <td data-title="Saldo">6</td>
        <td data-title="Fecha vencimiento">22/04/2022</td>
        <td rowspan="1" id="saldodias1">6</td>
        <td rowspan="1" id="saldodias" style="display: none">6</td>
        <td rowspan="1" id="ValidarDias" style="display: none">0</td>
      </tr>
    </tbody>
    </table>
    </div>
    </td>
    <td class="saldossiguientes">
      <h3 class="subtitulo">
      SALDOS SIGUIENTES
      </h3>
      <div class="saldosAnticipados">
      <table class="table">
      <thead>
        <tr>
          <th></th>
          <th>Año sig.</th>
          <th>Dias por asignar</th>
          <th>Dias anticipados</th>
          <th>total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span id="eliminar-saldo-btn" title="Eliminar" style="display: none">x</span>
          </td>
          <td data-title="AnioSiguiente">2021</td>
          <td data-title="DiasOtorgados">10</td>
          <td data-title="SaldosAdelantados">0</td>
          <td data-title="total" id="saldo_adelantado">10</td>
        </tr>
      </tbody>
      </table>
      </div>
    </td>
  </tr>
</tbody>
</table>
</div>
</div>

Es importante resaltar que estoy haciendo uso de media-queries, cuando la pantalla sea mayor a 425px pues la tabla no deberá verse afectada y permanecerá una al lado de otra.

1
  • ¿No sería mucho mas sencillo que saldos fuera realmente una tabla independiente de saldos siguientes?, dado lo que expones parece que tendría mas sentido
    – user128299
    Commented el 19 feb. 2021 a las 16:13

3 respuestas 3

1

Contemplando que actualizaste la pregunta e indicas que hay que respetar el media query lo ideal puede ser usar 2 div que contengan a cada tabla y emplear la propiedad css float; por lo tanto es necesario tocar el CSS

quedaría se la siguiente forma y este seria el Ejemplo

.saldos {
  float: left;
}

@media screen and (max-width: 425px){
  
  .saldos {
    display: block;
    float: none;
  }

    .subtitulo {
        font-weight: bold;
        font-size: medium;
        text-align: center;
        margin: 0px;
    }

    .table {
        margin-bottom: 0px;
    }

    span#eliminar-saldo-btn {
        display: block;
        font-size: 20px;
        padding-right: 5px;
        font-family: cursive;
        color: #ab1313;
        font-weight: bold;
    }

    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
        padding: 2px;
    }

    .table>tbody>tr>td {
        vertical-align: middle;
    }

    #saldo_dias1 {
        vertical-align: middle;
        font-weight: bold;
        font-size: 20px;
    }

    #saldo_dias {
        vertical-align: middle;
        font-weight: bold;
        font-size: 20px;
    }  
}
<div id="tablas_saldos">
    <div class="saldos">
        <h3 class="subtitulo">SALDOS</h3>
        <table class="table">
            <thead>
                <tr>
                    <th></th>
                    <th>Año</th>
                    <th>Saldo</th>
                    <th>Fecha vencimiento</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><span id="eliminar-saldo-btn" title="Eliminar" style="display: none">x</span></td>
                    <td data-title="Año">2020</td>
                    <td data-title="Saldo">6</td>
                    <td data-title="Fecha vencimiento">22/04/2022</td>
                    <td rowspan="1" id="saldodias1">6</td>
                    <td rowspan="1" id="saldodias" style="display: none">6</td>
                    <td rowspan="1" id="ValidarDias" style="display: none">0</td>
                </tr>
            </tbody>
        </table>
  </div>
  <div class="saldos">
        <h3 class="subtitulo">SALDOS SIGUIENTES</h3>
        <table class="table">
            <thead>
                <tr>
                    <th></th>
                    <th>Año sig.</th>
                    <th>Dias por asignar</th>
                    <th>Dias anticipados</th>
                    <th>total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><span id="eliminar-saldo-btn" title="Eliminar" style="display: none">x</span></td>
                    <td data-title="AnioSiguiente">2021</td>
                    <td data-title="DiasOtorgados">10</td>
                    <td data-title="SaldosAdelantados">0</td>
                    <td data-title="total" id="saldo_adelantado">10</td>
                </tr>
            </tbody>
        </table>
  </div>
</div>

te dejo un link al video de la prueba: https://youtu.be/RSLBTEaqeDo

3
  • No encuentro las clases saldosTabla, saldosAnticipados, saldossiguientes que originalmente estan en mi pregunta, esto me confunde un poco.
    – John Doe
    Commented el 21 feb. 2021 a las 18:42
  • no las necesitas...
    – user46896
    Commented el 21 feb. 2021 a las 18:55
  • a menos que las uses para otro proposito en javascript
    – user46896
    Commented el 21 feb. 2021 a las 18:56
0

Actualmente el código indica que los dos (Saldos y Saldos siguientes) están en el mismo tr, en dos td distintos, uno al lado del otro, y lo muestra tal cual. Si lo quiere debajo pon "Saldos siguientes" en un tr nuevo.

Cambia

</td>
<td class="saldossiguientes">

Por

</td>
</tr>
<td>
<td class="saldossiguientes">
1
  • Esto afectara en algo al momento de verse desde una resolución mayor a 425px ?
    – John Doe
    Commented el 19 feb. 2021 a las 17:28
0

mediante css podés dividir la tabla por div. colócale una clase y usa flexbox, usa display: Flex flex-direction: column

todo mediante css y deben estar dentro de una caja padre a la cual le colocas esos atributos

1
  • Puedes aportarme un ejemplo con el código puesto a mi pregunta para darle validez a tu respuesta
    – John Doe
    Commented el 19 feb. 2021 a las 18:18

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.