Laravel - 在可邮寄表格中包含表格

Question

我正在发送订单确认并继续...我需要在电子邮件中显示此表，但引导程序在 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/responsive-datatables-through-card-ui-design-for-email-aca6f3c395a2