电子邮件正文样式和mailto功能无效

时间:2018-05-02 06:42:01

标签: html css email

我需要打开一个邮箱,其中文本框内容是邮件正文。

示例代码:

            <!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>

浏览器输出: enter image description here

电子邮件中的相同代码输出: enter image description here

0 个答案:

没有答案
相关问题