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.