How can I display two table in email layout laravel 5.4?

Question

I want to customize Laravel 5.4 Notification Email Templates

https://medium.com/@adnanxteam/how-to-customize-laravel-5-4-notification-email-templates-header-and-footer-158b1c7cc1c

On the vendor/mail/html/message.blade, I try like this :

@component('mail::layout')
    {{-- Header --}}
    @slot('header')
        @component('mail::header', ['url' => config('app.url')])
            {{ config('app.name') }}
        @endcomponent
    @endslot

    {{-- Body --}}
    This is table one
    @component('mail::table')
    | Laravel       | Table         | Example  |
    | ------------- |:-------------:| --------:|
    | Col 2 is      | Centered      | $10      |
    | Col 3 is      | Right-Aligned | $20      |
    @endcomponent

    This is table two
    @component('mail::table')
    | Laravel       | Table         | Example  |
    | ------------- |:-------------:| --------:|
    | Col 2 is      | Centered      | $10      |
    | Col 3 is      | Right-Aligned | $20      |
    @endcomponent

    {{-- Subcopy --}}
    @isset($subcopy)
        @slot('subcopy')
            @component('mail::subcopy')
                {{ $subcopy }}
            @endcomponent
        @endslot
    @endisset

    {{-- Footer --}}
    @slot('footer')
        @component('mail::footer')
            &copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.
        @endcomponent
    @endslot
@endcomponent

There are 2 tables. The first table appears well. But the second table, looks not neat. Seems the css does not work. And other than that the data after the table 1, the text is very small

The result of email layout like this :

Why did it happen? Is my code is still wrong?

can you dump the resulting html? But the second table, looks not neat is a bit vague. is it visually? or by the generated code? — Bagus Tesa
hmm, it is weird, notice that <div class="table"> there? isn't it is not supposed to be there? could you dump the html? also, try to run php artisan view:clear (sorry, its been ages since last time i touch Laravel, the function i'm looking for is the one that clears view cache). — Bagus Tesa
To anyone having a similar problem; I also had the weird div tag everywhere I wanted to add a table. It's actually pretty simple to fix and makes a lot of sense: Markdown interprets everything that's indented as a code block. All I needed to do was to not indent anything. — spaceemotion

Istiyak Tailor Istiyak Tailor · Accepted Answer · 2020-01-28T05:18:23

Just remove the indentation because when writing Markdown emails. Markdown parsers will render indented content as code blocks.

@component('mail::layout')
{{-- Header --}}
@slot('header')
    @component('mail::header', ['url' => config('app.url')])
        {{ config('app.name') }}
    @endcomponent
@endslot

{{-- Body --}}
This is table one
@component('mail::table')
| Laravel       | Table         | Example  |
| ------------- |:-------------:| --------:|
| Col 2 is      | Centered      | $10      |
| Col 3 is      | Right-Aligned | $20      |
@endcomponent

This is table two
@component('mail::table')
| Laravel       | Table         | Example  |
| ------------- |:-------------:| --------:|
| Col 2 is      | Centered      | $10      |
| Col 3 is      | Right-Aligned | $20      |
@endcomponent

    {{-- Subcopy --}}
    @isset($subcopy)
        @slot('subcopy')
            @component('mail::subcopy')
                {{ $subcopy }}
            @endcomponent
        @endslot
    @endisset

    {{-- Footer --}}
    @slot('footer')
        @component('mail::footer')
            &copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.
        @endcomponent
    @endslot
@endcomponent

How can I display two table in email layout laravel 5.4?

1 Answers