Laravel

Question

我正在发送订单确认和简历...我需要将此 table 显示在电子邮件中，但 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 在电子邮件环境中不起作用，因为外部样式表通常不起作用。此外，嵌入它甚至不起作用，因为电子邮件客户端只能接受某些标签。

您需要将其设为 table 布局，或看起来像卡片的 table 布局。

由于您有相当大的 table，您可以考虑使用卡片布局，以便手机可以很好地处理信息。包括代码在内的一些示例如下：https://medium.com/@nathankeenmelb/responsive-datatables-through-card-ui-design-for-email-aca6f3c395a2

Laravel - 在可邮寄中包含 table

Laravel - Include table in mailable

css

email

html-table

html-email