Tengo dos tablas que necesito ubicar una al lado de la otra para que se vean juntas. Para esto aplique un estilo css
.alinear {
float: left;
}
Y en la tablas puse de esta forma:
<table class="alinear" style="width: 50%">.... </table>
<table class="alinear" style="width: 50%">.... </table>
El Width lo puse a 50% para que ambas me queden en el centro de la pantalla.
Una vez implementado todo esto, las tablas se ubican una al lado de la otra pero una de la tablas pierde los bordes y se queda el texto sin perder su formato en la posición del float, a esto me refiero.
Por qué sucede esto, me falta alguna propiedad por incluirle, es como si los bordes de la tabla que se queda sin bordes se ubicará encima de la otra tabla. Alguna idea de que poder hacer.
Actualización:
Al revisar una vez más el código me doy cuenta que si quito el width 50% las tablas no pierden su borde y se ponen una al lado de la otra, lo que sucede que una tabla al tener el width al 100% su mitad se pone por debajo de la tabla flotante. Alguna sugerencia
Actualización 2:
Cree un estilo CSS
que es el siguiente:
.alinear table {
width: 50%;
border-collapse: separate;
}
Agregue el border-collapse: separate
; porque con collapse se queda exactamente igual; con separate y me dibuja los bordes de la tabla, pero me dibuja un borde alrededor de toda la tabla, como se muesrta en la imagen:
Voy a incluir todo el código para ver si es que me falta algo:
CSS que estoy usando:
.alinear {
float: left;
}
.alinear table {
width: 50%;
border-collapse: separate;
}
.tabed tr {
text-align: center;
}
Diseño de las tablas:
<div class="alinear">
<table class="table-bordered tabed" cellpadding="0" cellspacing="0" style="padding-top: 2%; ">
<thead>
<tr>
<td style="vertical-align: middle;border: 1px solid #000000;"><b>Bolsas no Liberadas</b></td>
<td style="vertical-align: middle;border: 1px solid #000000;"><b>Causa</b></td>
</tr>
</thead>
<tbody>
@foreach($arreglos_rechazos as $rechazo)
<tr>
<td style="border: 1px solid #000000;">{{ $rechazo['codigo_barra'] }} ( {{ $rechazo['no_lote'] }} / {{ $rechazo['h_clinica'] }} )</td>
<td style="border: 1px solid #000000;">{{ $rechazo['causa_pcr'] }}</td>
</tr>
@endforeach
@for($i = count($arreglos_rechazos); $i < 14; $i++)
<tr>
<td style="border: 1px solid #000000;">-----</td>
<td style="border: 1px solid #000000;">-----</td>
</tr>
@endfor
</tbody>
</table>
</div>
<div class="alinear">
<table class="table-bordered tabed" cellpadding="0" cellspacing="0" style="padding-top: 2%;">
<thead>
<tr>
<td style="vertical-align: middle;border: 1px solid #000000;"><b>Bolsas no Liberadas</b></td>
<td style="vertical-align: middle;border: 1px solid #000000;"><b>Causa</b></td>
</tr>
</thead>
<tbody>
@foreach($arreglos_rechazos as $rechazo)
<tr>
<td style="border: 1px solid #000000;">{{ $rechazo['codigo_barra'] }} ( {{ $rechazo['no_lote'] }} / {{ $rechazo['h_clinica'] }} )</td>
<td style="border: 1px solid #000000;">{{ $rechazo['causa_pcr'] }}</td>
</tr>
@endforeach
@for($i = count($arreglos_rechazos); $i < 14; $i++)
<tr>
<td style="border: 1px solid #000000;">-----</td>
<td style="border: 1px solid #000000;">-----</td>
</tr>
@endfor
</tbody>
</table>
</div>
Como poder desaparecer el borde que se agrega al usar separate