0

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.

introducir la descripción de la imagen aquí

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:

introducir la descripción de la imagen aquí

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

3 respuestas 3

0

Cuando trabajas con float y tienes elementos con width: 50% estos se pueden ver afectados por diferentes reglas como margenes, padding, bordes y cualquier otra cosa que afecte al espaciado directa o indirectamente.

Puedes resolver el problema fácilmente utilizando grid, este funciona similar a flexbox. En palabras simples defines un contenedor padre y puedes manipular a sus hijos mediante una grilla que tu defines.

En este caso la regla es sencilla, le dices a tu contenedor que utilizará grid, que tendrá una fila de un tamaño automático y dos columnas de 1 fracción de pantalla en todo momento (Tus tablas siempre se verán mitad y mitad sin importar la resolución de la pantalla).

.container{
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
}
<div class="container">
        <table border="1">
            <tr>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
            </tr>
            <tr>
              <td>Jill</td>
              <td>Smith</td>
              <td>50</td>
            </tr>
            <tr>
              <td>Eve</td>
              <td>Jackson</td>
              <td>94</td>
            </tr>
          </table>
          <table border="1">
            <tr>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
            </tr>
            <tr>
              <td>Jill</td>
              <td>Smith</td>
              <td>50</td>
            </tr>
            <tr>
              <td>Eve</td>
              <td>Jackson</td>
              <td>94</td>
            </tr>
          </table>
    </div>

La ventaja de trabajar con grid es que es un sistema pensado para trabajar el layout, por lo cual, si en pantallas pequeñas quieres poner una tabla debajo de la otra para que se vea mejor, simplemente aplicas una media query para definir que tu contenedor padre estará formado por 1 columna en vez de 2.

@media (max-width: 500px){
    .container{
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 1fr;
    }   
}
0

Hola incluye en la etiqueta <table></table> el atributo border-collapse: collapse te debería de solucionar el problema.

3
  • No me funcionó, realmente no tengo idea de que sucede. el 14 ago. 2021 a las 21:30
  • modifica tu pregunta e inserta los estilos asociados a la tabla haber que se puede estar obviando. el 14 ago. 2021 a las 21:35
  • Listo ya hice la actualizacion y agregue todo el codigo de diseño de las tablas y los css que estoy usando. gracias el 14 ago. 2021 a las 22:22
0

Resuelto el problema, realice algunas modificaciones en mi css y el resultado fue el que esperaba. El CSS me quedo de esta manera:

.alinear {
        float: left;
    }

    .alinear table {
        width: 50%;
        border-collapse: separate;
        border-style: hidden;
        margin: 0px;
        padding: 0px;
    }

Resultado final:

introducir la descripción de la imagen aquí

Espero que pueda servirle a alguien que lo necesite

Tu Respuesta

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

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