Home / Questions / 477083
Accepted
albertolg89
Asked: 2022-08-15 10:35:53 +0800 CST 2022-08-15 10:35:53 +0800 CST

Error applying css float: left to two tables

  • 772

I have two tables that I need to place next to each other so they can be seen together. For this apply a css style

.alinear {
      float: left;
   }

And in the tables I put this way:

<table class="alinear" style="width: 50%">.... </table>

<table class="alinear" style="width: 50%">.... </table>

I put the Width at 50% so that both remain in the center of the screen.

Once all this is implemented, the tables are placed next to each other but one of the tables loses its borders and the text remains without losing its formatting in the position of the float, this is what I mean.

enter image description here

Why is this happening, I am missing some property to include it, it is as if the borders of the table that runs out of borders will be placed on top of the other table. Any idea what to do.

Update:

Reviewing the code once again I realize that if I remove the width 50% the tables do not lose their border and are placed next to each other, what happens is that a table having the width at 100% its half is put below the floating table. any suggestion

Update 2:

Create a style CSSthat is as follows:

.alinear table {
        width: 50%;
        border-collapse: separate;
    }

Add the border-collapse: separate; because with collapse it stays exactly the same; with separate and it draws the borders of the table, but it draws a border around the entire table, as shown in the image:

enter image description here

I'm going to include all the code to see if I'm missing something:

CSS I'm using:

.alinear {
        float: left;
    }

    .alinear table {
        width: 50%;
        border-collapse: separate;
    }
.tabed tr {
        text-align: center;

    }

Table layout:

<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>

How to disappear the border that is added when usingseparate

css

3 Answers

  1. Hello, include the border-collapse attribute in the tag <table></table>: collapse should solve the problem.

    • 0

  2. Solved the problem, made some modifications to my css and the result was what I expected. The CSS I stay this way:

    .alinear {
        float: left;
    }

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

    Final score:

    enter image description here

    I hope it can help someone who needs it

    • 0
  3. Best Answer

    When you work with float and you have float elements width: 50%they can be affected by different rules like margins, padding, borders and anything else that affects spacing directly or indirectly.

    You can easily solve the problem using grid, it works similar to flexbox. In simple words you define a parent container and you can manipulate its children through a grid that you define.

    In this case the rule is simple, you tell your container that it will use grid, which will have one row of an automatic size and two columns of 1 screen fraction at all times (Your tables will always be half and half regardless of the resolution of the screen).

    .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>

    The advantage of working with a grid is that it is a system designed to work with the layout, so if on small screens you want to put one table below the other to make it look better, you simply apply a media query to define that your parent container will be made up of 1 column instead of 2.

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