Laravel - включить таблицу в отправляемый

Question

Я отправляю подтверждение заказа и возобновляю ... Мне нужно, чтобы эта таблица была показана внутри письма, но bootstrap не работает в файле mail.blade ...

<div class="container">
<div class="row ">
    <div class="table-responsive w-100">
        <div class="d-table w-100">
            <div class="d-table-row">
                <div class="d-table-cell p-2 pl-5 pr-5 border border-dark text-center">Licence type</div>
                <div class="d-table-cell p-2 pl-5 pr-5 border border-dark text-center">Price</div>
                <div class="d-table-cell p-2 pl-5 pr-5 border border-dark text-center">Quantity</div>
                <div class="d-table-cell p-2 pl-5 pr-5 border border-dark text-center">Subtotal</div>
            </div>
            <div class="d-table-row">
                <div class="d-table-cell p-2 border border-dark text-center">100 Mb</div>
                <div class="d-table-cell p-2 border border-dark text-center">{{$lic100->price}} €</div>
                <div class="d-table-cell p-2 border border-dark text-center">{{$order->nr100}}</div>
                <div class="d-table-cell p-2 border border-dark text-center"><div id="subt100">{{ ($lic100->price * $order->nr100 ) }} €</div></div>
            </div>
            <div class="d-table-row">
                <div class="d-table-cell p-2 border border-dark text-center">250 Mb</div>
                <div class="d-table-cell p-2 border border-dark text-center">{{$lic250->price}} €</div>
                <div class="d-table-cell p-2 border border-dark text-center">{{$order->nr250}}</div>
                <div class="d-table-cell p-2 border border-dark text-center"><div id="subt250">{{ ($lic250->price * $order->nr250 ) }} €</div></div>
            </div>
            <div class="d-table-row">
                <div class="d-table-cell p-2 border border-dark text-center">500 Mb</div>
                <div class="d-table-cell p-2 border border-dark text-center">{{$lic500->price}} €</div>
                <div class="d-table-cell p-2 border border-dark text-center">{{$order->nr500}}</div>
                <div class="d-table-cell p-2 border border-dark text-center"><div id="subt500">{{ ($lic500->price * $order->nr500 ) }} €</div></div>
            </div>
            <div class="d-table-row">
                <div class="d-table-cell"></div>
                <div class="d-table-cell"></div>
                <div class="d-table-cell p-2 border border-dark text-center">Total:</div>
                <div class="d-table-cell p-2 border border-dark text-center"><div id="total">{{ ($lic100->price * $order->nr100 ) + ($lic250->price * $order->nr250 ) + ($lic500->price * $order->nr500 ) }} €</div></div>
            </div>
        </div>
    </div>
</div>
</div>

как я могу заставить это работать должным образом? Должен ли я преобразовать его в обычный html <table>?

Answer 1

Bootstrap не будет работать в среде электронной почты, потому что внешние таблицы стилей обычно не работают. Кроме того, встраивание его даже не будет работать, потому что почтовые клиенты могут принимать только определенные теги.

Вам необходимо сделать это макетом таблицы или макетом таблицы, похожим на карточку.

Как вы Если у вас довольно большой стол, вы можете рассмотреть возможность использования макета карты, чтобы мобильные телефоны могли хорошо обрабатывать информацию. Вот несколько примеров, включая код: https://medium.com/@nathankeenmelb / response-datatables-through-card-ui-design-for-email-aca6f3c395a2