Float и display: встроенный блок, неправильно работает в DomPDF

Question

Здравствуйте, разработчики! У меня проблемы с преобразованием HTML VIEW в PDF. У меня есть несколько таблиц, я хочу, чтобы они отображались рядом, 1 строка два столбца, все ширина и высота таблицы одинаковы, но когда я использую float: left; таблица не показана.

---

I am tried DOMPDF_ENABLE_CSS_FLOAT true and Display:inline-block; and float:left; but didnt worked.
  my code.

    //Blade File
 @if(!$residents->isEmpty())
            @foreach($residents as $resident)
            <div><br>
                 <table border="1">
                    <tbody>
                        <tr>
                            <td width="10%" align="center" colspan="1" >
                                <img width="196px" height="209px"
                                src="{{($resident->images?env('CLOUD_FRONT_URL').'/residents/gallery/images/'.$resident->images :url('/images/no-image.jpg'))
                                }}">
                            </td>
                            <td width="40%" align="center" colspan="1">
                                <b>@if($resident->last_name){{$resident->last_name}}, @endif{{$resident->first_name}} <hr></b>

                                APT #{{$resident->room}} <hr>
                                @if($resident->birth_date != '-0001-11-30 00:00:00')
                                Age {{$resident->birth_date->age}} <hr>
                                @else
                                Age <hr>
                                @endif
                                @if ($resident->care_level == 'assisted_living')
                                ASSISTED LIVING
                                @elseif ($resident->care_level == 'transitional')
                                TRANSITIONAL
                                @elseif($resident->care_level == 'memory')
                                MEMORY
                                @endif
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>&nbsp;
            @endforeach
        @endif

// here is CSS

table {
    table-layout: auto;
    border-spacing: 2px;
    width: 49.9%;
    float:left;


    }

td {
    font-size: 15px;
}

Здравствуйте, разработчики! У меня проблемы с преобразованием HTMl в PDF. У меня есть несколько таблиц, я хочу, чтобы они отображались рядом, 1 строка два столбца, все ширина и высота таблицы одинаковы, но когда я использую float: left; таблица не показана.

Answer 1

Я предлагаю вам не использовать float все вместе для стилизации макета и использовать flex или grid.

сетка PO C:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  padding: 10px;
}

.table {
  display: grid;
  grid-template-columns: 80px auto;
  grid-template-rows: repeat(4, 20px);
  border: solid 1px;
}

.img {
  background: blue;
  grid-row: 1 / 5;
}

.row:not(:last-child) {
  border-bottom: solid 1px grey;
}

.row {
  text-align: center;
}

<div class="container">
  <div class="table">
    <div class="img"></div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
  </div>
  <div class="table">
    <div class="img"></div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
  </div>
  <div class="table">
    <div class="img"></div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
  </div>
  <div class="table">
    <div class="img"></div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
  </div>
</div>

подробнее о сетке: https://css-tricks.com/snippets/css/complete-guide-grid/