Email Table Style seems not to work for Outlook (send via UTL_Mail)

Question

I want to generate an email including some table data and use PLQL to send this to company members. So far I am using some HTML templates and Oracles UTL_mail. I did send emails to a Gmail web interface and to Outlook. As the style seems okay in Gmail, I guess that it is an Outlook issue. I am a complete beginner when it comes to HTML and I am open to any suggestions and workarounds so that the table looks somewhat smooth for Outlook, too.

Below Code will not show any border for Outlook but it does for Gmail and within the W3School-Try-It editor.

 utl_mail.send(sender => 'noreply@mycompany.de'
            , recipients => 'me@gmail.com,me@mycompany.de'
            , subject => 'Test Table'
            , message =>
                    '<!doctype html>
                    <html lang="de">
                    <head>
                    <meta charset="utf-8">
                    <title>Oracle Table</title>
                    <style>
                    body {
                    font-family: Arial, Helvetica, sans-serif;
                    padding: 2em;
                    }
                    table.table {
                    width: 80%;
                    }
                    .table th {
                    text-align: left;
                    }
                    table, th, td {
                    border: 1px solid rgba(3,3,3,0.2);
                    border-collapse: collapse;
                    }
                    th.zelle {
                    text-align: left;
                    padding-right: 2rem;
                    }
                    td.zelle {
                    text-align: right;
                    padding-left: 1rem;
                    }
                    img {
                    width: 200px
                    }
                    @media screen and (max-width: 1200px) {
                    body {
                    font-size: 150%;
                    }
                    table {
                    width: 100%;
                    }
                    table.table {
                    width: 60%;
                    font-size: 100%;
                    }
                    tr {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    margin: 0.5em 0;
                    border: 1px solid rgba(3,3,3,0.2);
                    border-collapse: collapse;
                    }
                    td, th {
                    flex: 1 1 150px;
                    border-collapse: collapse;
                    }
                    th.zelle {
                    text-align: left;
                    padding-right: 1rem;
                    }
                    td.zelle {
                    text-align: right;
                    padding-left: 1rem;
                    }
                    }
                    </style>
                    </head>    <body>        <p> This is a table</p> <br>
                    <table class="table">
                    <tr>
                    <th class="zelle"> Name </th>   <th class="zelle"> Sal </th>   <th class="zelle"> Dep </th>    </tr>  
                    <tr>  <td class="zelle"> Smith </td>   <td class="zelle"> 3k </td>   <td class="zelle"> 12 </td>    </tr>     
                    <tr>  <td class="zelle"> Miller </td>   <td class="zelle"> 3k </td>   <td class="zelle"> 10 </td>    </tr>   
                    <tr>  <td class="zelle"> Johnsen </td>   <td class="zelle"> 5k </td>   <td class="zelle"> 29 </td>    </tr>    
                  </table>     
                  <section>      
                  <p> Best regards, <br>  Peter</p> 
                  </section>   
                  </body>    
                  </html>
                    '
            , mime_type => 'text/HTML; charset= utf-8'
            );

You declare `charset= utf-8` Is your database character set also `AL32UTF8`? — Wernfried Domscheit, Jan 04 '23 at 09:42
We have the charset WE8ISO8859P1. I tried ISO-8859-1 on the two spots from charset (one in the HTML-header and one in utl_mail). The result kept the same. — Peter Frey, Jan 04 '23 at 10:14
I think it just could not do the proper color. Once I removed rgba(3,3,3,0.2) the border was shown. — Peter Frey, Jan 04 '23 at 10:20

MT0 · Accepted Answer · 2023-01-04T10:39:17.727

Debug the code incrementally starting from a minimal representative example and, when that is working, incrementally include extra functionality.

Start without any CSS:

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <title>Oracle Table</title>
</head>
<body>
  <p> This is a table</p><br />
  <table class="table">
    <thead>
      <tr>
        <th class="zelle"> Name </th>   <th class="zelle"> Sal </th>   <th class="zelle"> Dep </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="zelle"> Smith </td>   <td class="zelle"> 3k </td>   <td class="zelle"> 12 </td>
      </tr>     
      <tr>
        <td class="zelle"> Miller </td>   <td class="zelle"> 3k </td>   <td class="zelle"> 10 </td>
      </tr>   
      <tr>
        <td class="zelle"> Johnsen </td>   <td class="zelle"> 5k </td>   <td class="zelle"> 29 </td>
      </tr>
    </tbody>
  </table>     
  <section>      
  <p> Best regards, <br>  Peter</p> 
  </section>
</body>    
</html>

Note: I added / to the self-closing tags and added thead and tbody tags; these aren't required (for HTML), just my personal preference.

Test if that displays as expected.

Add in a single CSS statement:

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  padding: 2em;
}
</style>

and test.

Add another CSS statement and test and repeat until you find where it breaks.

right you are... I thought, I was already pretty minimal :-D — Peter Frey, Jan 04 '23 at 12:40

Email Table Style seems not to work for Outlook (send via UTL_Mail)

1 Answers1