HTML/CSSメールをGmailで正しく表示させる

Gmail内で正しいHTML表示をさせる

※HTMLの初心者の質問になるため、
内容に齟齬がございましたらご教示頂けますと幸いです。

もしHTMLメール作成にお詳しい方がいらっしゃったら、
ご助力頂けますと幸いですm(_ _)m

お手数ではございますが、宜しくお願い致します。

★Gmail内で正しいHTML/CSSの表示がされない
★タグ毎に送信テストすると表示される

HTMLメールメルマガの作成のため、CSSインライン形式でHTMLを作成し、
タグ確認やウェブ上での表示確認、メーラーでの表示確認を行っております。

前提として、ウェブ上での表示確認、メーラーでの表示確認の際は正しく表示がされていたことは確認済みです。
※入力してして確認できたweb確認はこちら
・http://hmaster.net/tagtest.html
・https://codepen.io/

まず、施策として<td>内に<h2><p>の２つの要素があるので、
それぞれ分離し以下の２パターンに分けて受信確認したところ、
CSSが動作し、正しい表示が確認できました。

<table><tr><td><h2>
<table><tr><td><p>

これにより、各エレメントのstyle要素は
Gmail上で表示されることが確認できました。

しかし、<h2><p>を一つのHTMLとしたときには表示されません。
以下のパターンを試してみましたが、相変わらず<h2>のCSSが動作しません。
※<p>要素のCSSは正しく表示されます

<p>エレメントのCSSを外す
<h2><p>を別の<tr>内に分離する
<h2><p>を別の<table>に分離する

テスト送信を行ったところ、
Gmailで【h2見出し部分】のCSS(背景色など)が効かない状況になりました。

発生している問題

Gmailで各エレメント要素を分離して受信する際は表示されるのに、
<h2><p>要素を１つのHTMLとした際は正しく表示されない

該当のソースコード

HTML/CSS/inline
1<table cellpadding="0" cellspacing="0" class="content" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;bgcolor:#ffffff;width:100%;" >
2<tr>
3            <td style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;bgcolor:#ffffff;" >
4              <h2 class="heading" style="margin-top:30px;margin-bottom:0.3em;margin-right:0;margin-left:0;font-style:normal;font-variant:normal;font-weight:24px;font-size:20px;font-family:Hiragino Kaku Gothic Pro;line-height:24px;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:7px;background-color:#F8F8F8;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;border-left-width:5px;border-left-style:solid;border-left-color:#25BFA1;color:#474747;" >◯◯見出し◯◯</h2>
5
6              <p class="text-contents" style="color:#333;font-size:16px;line-height:1.47;margin-top:2em;margin-bottom:2em;margin-right:auto;margin-left:auto;padding-top:1em;padding-bottom:1em;padding-right:1em;padding-left:1em;width:90%;border-width:1px;border-style:solid;border-color:#ccc;background-color:#fff;box-shadow:1px 1px 2px #ccc;" >
7                <u>コンテンツ</u><br><br>
8                ・コンテンツ<br>
9                ・コンテンツ<br>
10                ・コンテンツ<br>
11                ・コンテンツ<br></p> 
12            </td>
13          </tr>
14</table>

試したこと

以下の要素に別けてHTMLを作成し、受信表示確認

→正しく表示される
・<table><tr><td><h2>
・<table><tr><td><p>

<h2><p>を一つのHTMLとして作成し、受信表示確認

→<h2>のCSSが動作せず、テキストのみになる
・<p>エレメントのCSSを外す
・<h2><p>を別の<tr>内に分離する
・<h2><p>を別の<table>に分離する
※いずれも<p>要素のCSSは正しく表示されます

0. HTML、マルチパート（テキスト＋HTML）でも同上

2018/09/21　13:24

Gmailで受信した際のソース

--SUBMITMAIL_180921_00094.16392
Content-Type: text/html; charset="iso-2022-jp"
Content-Transfer-Encoding: 7bit

<table cellpadding="0" cellspacing="0" class="content" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;bgcolor:#ffffff;width:100%;" >
<tr>
            <td style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;bgcolor:#ffffff;" >
              <h2 class="heading" style="margin-top:30px;margin-bottom:0.3em;margin-right:0;margin-left:0;font-style:normal;font-variant:normal;font-weight:24px;font-size:20px;font-family:Hiragino Kaku Gothic Pro;line-height:24px;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:7px;background-color:#F8F8F8;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;border-left-width:5px;border-left-style:solid;border-left-color:#25BFA1;color:#474747;" >◯◯見出し◯◯</h2>

              <p class="text-contents" style="color:#333;font-size:16px;line-height:1.47;margin-top:2em;margin-bottom:2em;margin-right:auto;margin-left:auto;padding-top:1em;padding-bottom:1em;padding-right:1em;padding-left:1em;width:90%;border-width:1px;border-style:solid;border-color:#ccc;background-color:#fff;box-shadow:1px 1px 2px #ccc;" >
                <u>コンテンツ</u><br><br>
                ・コンテンツ<br>
                ・コンテンツ<br>
                ・コンテンツ<br>
                ・コンテンツ<br></p> 
            </td>
          </tr>
</table>

--SUBMITMAIL_180921_00094.16392--