Стиль тела электронной почты и функция mailto не работают

Мне нужно открыть письмо с содержимым текстового поля в теле письма.

Образец кода:

            <!DOCTYPE html>
    <html>
    <head>
    <style>
    table.info th{
         border-top: 1px solid #ddd; 
    }
    table.info td{
         border-top: 1px solid #ddd; 
    }
    table.info tr.bottom td{
         border-bottom: 1px solid #ddd; 
    }
    table.info {
    border-spacing: 0px; 
    padding:5px;
    width:100%;
    }
    .wrapper {
        text-align: center;
    }

    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
    </style>
    </head>
    <body>
    <p class = "claim">
    Dear ${},</br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel faucibus felis. Orci varius natoque penatibus et magnis dis parturient
    montes, nascetur ridiculus mus. Integer euismod et odio eget dictum. Vivamus hendrerit pharetra tortor, eu lobortis elit vehicula sit
    amet. Cras finibus diam a libero porta lacinia. Quisque a auctor risus. Curabitur at tristique diam, vel pellentesque leo.
    </p>
    <div>
    <div class = "header" style = "margin:10px 0px 10px 0px;background-color:#34b5ba;padding:12px;">
    <b>Claim Details</b>   [<a href = "#">Click here to login into CARE and view all claims details</a>]
    </div>
    <div>
    <table class = "claim" CELLPADDING=7>
     <tr>
        <td>Claim record #</td>
        <td>20170085</td> 
        <td>Claim Type</td>
        <td>PP Claim</td>
      </tr>
      <tr>
        <td>Diagnosis</td>
        <td>Diagnosis 1</td> 
        <td>Procedure</td>
        <td>Procedure 1, procedure 2</td>
      </tr>
       <tr>
        <td>Treatment type</td>
        <td>Treatment 1</td> 
        <td>Policy inception date</td>
        <td>12/01/2016</td>
      </tr>
       <tr>
        <td>Policy year that the claim belongs to</td>
        <td>2018</td> 
        <td></td>
        <td></td>
      </tr>
    </table>
    </div>
    </div>
    <div>
    <div class = "header" style = "margin:10px 0px 5px 0px;background-color:#34b5ba;padding:12px;">
    <b>Policy History</b>
    </div>
    <div>
    <table class = "info" CELLPADDING=7>
    <tr>
        <th>#</th>
        <th>Claim Record </br>ID</th> 
        <th>Claim Record Type</th>
        <th>Registered </br>Date</th>
        <th>Provider ID</th>
        <th>Provider Name</th>
        <th>Claim Status</th>
        <th>Approved </br>Amount</th>
        <th>Requested </br>Amount</th>
        <th>Date of </br>Settlement</th>
    </tr>
    <tr>
        <td>1</td>
        <td>201706</td> 
        <td>MR Claim</td>
        <td>20/01/2017</td>
        <td>564899</td>
        <td>Apollo Hospital</td>
        <td>Approved</td>
        <td>Rs.45,000</td>
        <td>Rs. 50,000</td>
        <td>15/03/2017</td>
    </tr> 
    <tr>
        <td>2</td>
        <td>201625</td> 
        <td>PP Claim</td>
        <td>22/11/2016</td>
        <td>564899</td>
        <td>Apollo Hospital</td>
        <td>Settled</td>
        <td>Rs.15,000</td>
        <td>Rs. 17,000</td>
        <td>15/12/2016</td>
    </tr> 
    <tr class = "bottom">
        <td>3</td>
        <td>201533</td> 
        <td>MR Claim</td>
        <td>20/01/2017</td>
        <td>564899</td>
        <td>Apollo Hospital</td>
        <td>Approved</td>
        <td>Rs.45,000</td>
        <td>Rs. 50,000</td>
        <td>15/03/2015</td>
    </tr> 
    </table>
    </div>
    </div>

    <div>
    <div class = "header" style = "margin:10px 0px 5px 0px;background-color:#34b5ba;padding:12px;">
    <b>Policy History</b>
    </div>
    <div>
    <table class = "info" CELLPADDING=7>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th colspan = "2">Coverage End Date</th>

    </tr>
    <tr>
        <th>#</th>
        <th>Policy number</th> 
        <th>Product Code</th>
        <th>Product Name</th>
        <th>Member ID</th>
        <th>Balance SI</th>
        <th>Cumulative Bonus</th>
        <th>Start Date</th>
        <th>End Date</th>
    </tr>
    <tr>
        <td>1</td>
        <td>AMHI123456</td> 
        <td>Easy Health</td>
        <td>Easy Health</td>
        <td>1234567890</td>
        <td>Rs. 100,000</td>
        <td>Rs. 10,000</td>
        <td>21/09/2016</td>
        <td>21/09/2017</td>
    </tr> 
    <tr class = "bottom">
        <td>2</td>
        <td>AMHI14566</td> 
        <td>Test Health</td>
        <td>Hello Health</td>
        <td>1233455660</td>
        <td>Rs. 150,000</td>
        <td>Rs. 15,000</td>
        <td>22/10/2016</td>
        <td>23/11/2017</td>
    </tr> 

    </table>
    </div>
    </div>
    <div>
    <table class = "claim" CELLPADDING=7>
     <tr>
        <td>Date of admission</td>
        <td>20170085</td> 
        <td>Date of discharge</td>
        <td>PP Claim</td>
      </tr>
      <tr>
        <td>Claimed amount - Final approval </br>request for</td>
        <td>Rs. 200,000</td> 
        <td>Coverage claimed for</td>
        <td>Coverage 1, Coverage 2</td>
      </tr>
       <tr>
        <td>Provider name</td>
        <td>Apollo Hospitals</td> 
        <td>Room type</td>
        <td>Queen Suite</td>
      </tr>
    </table>
    <div style = "margin:0px 0px 0px 10px;">
    <a href = "">Login to CARE</a> to view more details of the claim
    </div>
    </div>
    <div>
    <div class = "header">
    <p style = "margin:10px 0px 10px 0px;background-color:#34b5ba;padding:12px;"> <b>View Documents</b></p>

    </div>

    <div>

    <table class = "claim" CELLPADDING=7>
     <tr>
        <td>TAT compliance</td>
        <td>24 Hours</td> 
      </tr>
      <tr>
        <td>Second opinion request raised by</td>
        <td>Ramesh Kumar</td> 
    </tr>
       <tr>
        <td>Reason for raising second opinion</td>
        <td><textarea  name = "body" id = "ta1" rows = "4" cols = "50"></textarea></td>
      </tr>

    </table>
    </div>
    </div>
    <div class = "wrapper">
    <a class = "button" href = "mailto:?subject=Approved&body = "+document.getElementById('ta1').value;+>Approve</a>
    <a class = "button"  href = "mailto:?subject=Reject&body = "+document.getElementById('ta1').value;+ >Reject</a>

    </div>

    </body>
    </html>

Вывод в браузере: Стиль тела электронной почты и функция mailto не работают

Тот же код выводится по электронной почте: Стиль тела электронной почты и функция mailto не работают

Нет внешнего или встроенного CSS для шаблона электронной почты. Просто используйте их как встроенный стиль.

— 02.05.2018 08:51

У вас есть онлайн-инструменты, такие как лакмусовая бумажка, для проверки вашего шаблона электронного письма. Воспользуйтесь им, прежде чем двигаться вперед.

— 02.05.2018 08:52

всегда используйте встроенный CSS для HTML-писем, если вам нужна совместимость со всеми клиентами

— 02.05.2018 08:52

html css email

02.05.2018 08:42

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Другие вопросы по теме

Как поставить красный крест на кнопке?

Таблица стилей CSS не обновляется на сервере

Как использовать index с * ngFor в angular 2, 4, 5

Непрозрачность родителя не работает с дочерними элементами

Javascript-анимация с setInterval не работает

Включите Bootstrap CSS в <head> с Wicket

Как искать текст из json и отображать его в html?

Сделайте один элемент таким же, как и другой css

Два независимых дочерних флексбокса с одинаковой высотой без javascript

Как создать форму клина из содержимого в CSS

Стиль тела электронной почты и функция mailto не работают

Другие вопросы по теме

Похожие вопросы