Avadaのテーブル要素を使ったら自動改行されない

Wordpress で新しく固定ページを作成していたのですが、色々とつまづく箇所があったので問題と対処方法を残します。
 
Wordpress のテーマは Avada です。
なかなか日本語の情報がないため、トラブルシューティングを残しておくことで、誰かの役に立てばいいなぁ〜と思う。
 
さて、ページを作成していく中でtableエレメントを追加して表形式のブロックを作成しました。

左のカラムが見出しで右に内容が入るという表です。
この表がスマホで見たときに横スクロールが発生してしまうため、640px 以下では縦積みになるようにthタグとtdタグにdisplay: block;を指定します。

table th,
table td {
    display: block;
    width: 100%;
}

 
これにより要素が自動的に縦並びになるためカンタンに縦積みのレイアウトに変更できます。
あとは、見出し行と内容の入る行の区別が付きやすいように色を指定してあげれば OK です。

table th  {
    background-color: #f6f6f6;
}
table td  {
    background-color: #fff;
}

 
すると狙い通り縦積みにはなったのですが、やはり横スクロールが発生してしまいます。

 
文字列の折り返しということで、

width: 100%;
table-layout: fixed;
word-break: break-all;
word-wrap: break-all;
overflow-wrap: break-word;

などの指定をしてみるのですが、一向に改善せず。
 
あれこれ調べること小一時間･･･640px 以下のときに Avada が自動的に指定する以下の CSS が原因だとわかりました。

@media only screen and (max-width: 640px)
.table-1 td, .table-1 th, .tkt-slctr-tbl-wrap-dv td, .tkt-slctr-tbl-wrap-dv th {
    white-space: nowrap;
}

 
white-space とは

ソース中のテキストについて、自動改行するか複数の空白を一つの空白にするか、改行を空白にするかなど、改行やスペース、タブの扱いを指定するプロパティ

だそうですが、nowrapを指定すると、、、

ソース中の連続する半角スペース、タブ、改行を一つの半角スペースにまとめて表示します。自動的な折り返しは行いません。

引用：https://html-coding.co.jp/annex/dictionary/css/white-space/

・・・自動的な折り返しをしなくなるそうです。
なぜ勝手にこんな指定を（泣）
 
ということでword-breakやらword-wrapといった面倒な指定をしなくても以下の一行を追加するだけで正常に折り返して表示されるようになりました。

table th,
table td {
    display: block;
    width: 100%;
    white-space: pre-wrap;
}

 
pre-wrapは、

ソース中の連続する半角スペース、タブ、改行をそのまま表示し、それに加えて自動的な折り返しも行います。

だそうです。

正しく折り返しされました
 
たぶん、余計なことをするテーマを使っていなければ、そもそもこの問題は発生せずにdisplay: block;を指定するだけでうまくいくと思います。
Avada や他のテーマを使っていて、もし勝手にwhite-space: nowrap;が指定されることがあれば参考にしてください。
 
 
さて、これで無事ページ完成と思いきや、また新たな問題勃発。
これまで CSS を書いたあとの結果はプレビューで確認していて、そちらでの表示はバッチリでした。
ページを保存して本番の URL で確認すると何故か CSS が反映していない･･･。
 
ブラウザ側のキャッシュや Wordpress 側のキャッシュをクリアしても改善せず。
 
が、これもなんとか一応の解決方法を見つけたので記録として残しておきます。
 
CSS はテーマエディタから Avada の子テーマに対して書いていたのですが、こちらに書いたものはプレビューでは反映するが本番では反映しませんでした。
 
では、どうするかというと Avada を使用している場合は、Avada メニューから CSS を書けば反映されました。
 
１．Wordpress の管理メニューから「Avada」-「Options」をクリックします。

 
２．表示されたメニュー内にある「カスタム CSS」をクリックします。

 
３．コード入力欄にコードを入力して［Save Changes］をクリックします。
 
これにより、本番でも CSS が反映されるようになりました。
テーマの CSS よりもこちらが優先されるということなんですかね？
ただそれだとプレビューでは問題がなかった意味がわからないので不具合かなんかでしょうか？
根本的な解決にはなっていませんが、とりあえず反映すれば OK という方向けの Tips です。