タブの中にテーブルプレス→ずれる

Question

前提・実現したいこと

ワードプレス超超超超超初心者です。。
わかる方から聞いたら屁と思うようなお恥ずかしい質問かもしれませんが
どなたかご教授いただけますと助かります。。
社内には聞ける人が一人もいない状況で大変困っています。。。

タブの中にテーブルプレス を入れると下記のような問題が発生します。。
※テーブルプレス 単体では問題なかったです

【問題1】
緑（.row-1（一番上の行））がずれてしまいます。
→ずれないように設定したい

【問題2】
タブの下の幅に合わせてテーブルプレスの大きさを大きくしたり小さくしたりしたい
※ただタブの中に入れるとサイズによって見切れてしまうので
テーブルプレス にて横スクロールするよう設定しています。
これをせずに幅に合わせて表を自動で大きくりたり小さくしたりしたいです。

【疑問】
なぜだか分かりませんがウィンドウを触ると
緑（.row-1（一番上の行））のずれていたのが
パッと直ります。

★記載したCSS★

<div align="center"> <div style="width: 100%;"> [table id=58 /] </div> </div>

こんな感じでテキストブロックへテーブルプレスを呼び出し
そこへCSSを書き込んでいます。

Answer 1

テーブルプレスの水平スクロールをなくしたら画面幅に合わせて表示できるようになりました。
でも、今度はスマホ表示にすると表が見切れてしまいます。。