Kintoneのテーブルを表にしてkMailerで送信する

# 2021.7.2追記
* やりたかったこと、できました。ソースとプレビュー画像追記しました。
* 今の所、iPhoneのメールアプリ、macのメールアプリ、ブラウザ版Gmailで表示確認済みです。

# きっかけ
* 仕事でタイトルのようなことがやりたいと言われ、krewData等のプラグイン導入を考えましたが、プラグインをやたらめったら使うのが好みではないので、自分でやってみました。ら、ほぼほぼやりたいことはできたのですが、困ったこともあるので、最後に書きます。

# kMailerに渡すデータ
* もともと別アプリに持っているデータを関連データで引っ張ってきてメインのアプリに表示しており、そのデータをHTMLメール文面に記載したかったのですが、kMailerは関連データに対応していないので、データをこねくり回してメインアプリのサブテーブルに突っ込みました。

# kMailerでテーブルを本文に挿入すると
* テーブルのフィールドコードは「テーブル」です。
* 表示したい項目は、「対象日付」「申請種別」「経路」　です。
* kMailerのメールテンプレート編集画面で「テーブル」を本文に挿入すると、こんな感じに表示されました。

```
{{#テーブル}}
{{対象日付}}, {{申請種別}}, {{経路}}
{{/テーブル}}
```

* このままHTMLとして保存し、プレビューするとこんな感じ

![スクリーンショット 2021-07-01 14.05.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/ef2aba0c-cdd6-455a-4fc1-4f15f1d44987.png)

* 複数行データを出すことができました！
* テーブルのような見た目で表示したかったので、以下のようなHTMLを書きました。
* CSSはすべてインラインで書くことになります。


```html
<!-- 2021.7.2編集 -->
<div style="overflow: auto; ">
  <div style="display:table; color: #fff; min-width: 1200px;">
    <span style="display:table-cell; min-width: 150px; max-width: 150px; border-style: solid; border-width: 1px; border-color: white; text-align: center; vertical-align: middle; background-color: #3498db; padding: 10px 0;">対象日付</span>
    <span style="display:table-cell; min-width: 75px; max-width: 75px; border-style: solid; border-width: 1px; border-color: white; text-align: center; vertical-align: middle; background-color: #3498db; padding: 10px 0;">申請種別</span>
    <span style="display:table-cell; min-width: 150px; max-width: 150px; border-style: solid; border-width: 1px; border-color: white; text-align: center; vertical-align: middle; background-color: #3498db; padding: 10px 0;">経路</span>
  </div>

  {{#テーブル}}
  <div style="display:table; min-width: 1200px;">
    <span style="display:table-cell; min-width: 150px; max-width: 150px; border-style: solid; border-width: 1px; border-color: white; text-align: center; vertical-align: middle; background-color: #eee; padding: 10px 0;">{{対象日付}}</span>
    <span style="display:table-cell; min-width: 75px; max-width: 75px; border-style: solid; border-width: 1px; border-color: white; text-align: center; vertical-align: middle; background-color: #eee; padding: 10px 0;">{{申請種別}}</span>
    <span style="display:table-cell; min-width: 150px; max-width: 150px; border-style: solid; border-width: 1px; border-color: white; text-align: center; vertical-align: middle; background-color: #eee; padding: 10px 0;">{{経路}}</span>
  </div>
  {{/テーブル}}
</div>
```

* {{#テーブル}}{{/テーブル}}の中身が繰り返し表示されます。
* 項目名は挿入されないので、自分で付ける必要があります。
* Tableタグでくくる方法も考えましたが、くくってもkMailerによってHTMLが編集されるので、くくれませんでした。なのでulとliでテーブル風にしています。
* このHTMLを保存して、実際にメールを送信すると以下のようになります。

2021.7.2追記　改善後↓
![スクリーンショット 2021-07-02 18.47.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1309306/27e79863-7d9c-1ba8-f5ae-549134c0ab19.png)


# やりたいことはほぼできた、けどちょっと困ったこと
* 枠線に色を付けず、background-colorで見やすくしました。テーブルの行数が可変なのでインラインのCSSで1pxずつの枠線を引く方法がわかりませんでした。が、これはこれで良いので良しとします。
* ulについている、``margin-top-start``と``margin-top-end``、``margin-bottom-start``と``margin-bottom-end``を!importantで消したのですが、受信メールでは復活していました。（Kintoneでプレビュー時には消えてたのに…）Gmailが復活させているのでしょうか？謎です。
* ulのmarginだけ解決できればワタシ的には完全に満足です。
* ていうかそもそもul/li以外で表を表現する方法があるのかもしれない…？
* どなたかアドバイスあればぜひコメントお願いします。
 * ↑いろいろ書いてますが、2021.7.2全部解決しました！なので失敗コードは削除しました。