GoogleドキュメントからBloggerに表を貼り付ける方法

私はブログの下書きにGoogleドキュメントを使用しています。Googleドキュメントはメニューの「挿入」から簡単に表を作成することができて便利なのですが、この表をBloggerに貼り付けるときにうまくいかず苦労しました。いろいろと試行錯誤した結果をまとめたいと思います。

HTMLに変換してから貼り付けると罫線が表示されない

私は普段Googleドキュメントで下書きしたものを拡張機能「Docs to Markdown」でHTMLに変換してからBloggerに貼り付けています。
HTMLに変換するとシンプルなテーブルタグに変換されます。
しかし、これをBloggerのHTMLビューに貼り付けると、なぜか罫線が表示されません。カスタムCSSの追加で、tableにborderを設定してみると、キャプション付きの画像など余計なところに枠線がついたりしてうまくいきませんでした。
私は「JetTheme」というテーマを使っているのですが、テーブルに罫線が表示されないのはテーマの仕様なのかもしれません。

そのままコピペして貼り付けると罫線が表示された

そのまま貼り付けると罫線が表示された（下）

GoogleドキュメントはそのままコピペしてBloggerの作成ビューに直接貼り付けることができるのですが、HTMLのソースがごちゃごちゃするのが嫌で先にHTMLに変換してから貼り付けていました。
その方法ではうまくいかなかったので、物は試しにGoogleドキュメントで作成した表をそのままコピペしてBloggerの作成ビューに直接貼り付けてみると罫線がちゃんと表示されました。

表がスマホ対応（レスポンシブ）するように調整

スマホで見ると表が途切れてしまう（下）

Googleドキュメントの表をただ貼り付けただけではレスポンシブになっておらず、スマホで見ると表がはみ出してしまいます。
そこでソースを微調整します。
「table style="border-collapse: collapse; border: none; table-layout: fixed; width: 数字〇〇〇〇;"」
を
「table style="border-collapse: collapse; border: none; table-layout: auto; width: 100%;"」
と書き換える
これで各デバイスの表示幅の最大幅かつはみ出すことがなくなりました。

スマホでも途切れず表示された（下）

まとめ

Blogger初心者の私は表をうまく表示させるために3日間くらい試行錯誤してしまいました。
今回、BLOGGER LABOさんの「【Blogger】Googleスプレッドシートを記事に貼り付けて使う方法」が非常に参考になりました。Googleドキュメントで作成した表でも同じ方法でうまくいきました。
これからも初心者目線でBloggerでブログをつくる際につまずき易いポイントを記事にしていきたいと思います。