</td></tr>テーブル内のすべての箇所で長さを直指定されていることがわかりました。いじって分かりましたが、テーブルを挿入した時点ではレスポンシブが効いていまが、表の見た目を変えようと枠をドラッグした瞬間からpx指定になるようです。解決編:テーブルをスマホ対応させるいくつかの方法まず、レスポンシブ化していない表示領域いっぱいのテーブル(表1)を下記に用意しました。ブラウザのウィンドウを縮ませるとテーブルが見切れてることが分かります。これはレスポンシブ化してないテーブルです。途中の文章が見切れて何が書いてあるのか分からなくなっていると思いますよ?では、このテーブルをレスポンシブ化させましょう。方法1:横幅をpxから%指定に変更するまずテーブルの枠の外側にカーソルを置き、テーブル全体が指定されるようにドラッグしましょう。↓のように青線で囲われる状態(選択状態)になります。表のプロパティを選択します。すると、テーブルの表示方法を詳細に指定できるウィンドウが立ち上がります。[2]テーブル幅を%で指定プロパティ画面の「幅」にはpxで数値が指定されていると思います。この部分を%で指定します。有効数値は1%~100%です。ここでは画面いっぱいにテーブルを表示したいので100%で指定しています。[3]レスポンシブ化できているかチェックでは画面で確認してみましょう。下記の表2のようにレスポンシブ化できていれば成功です。これはレスポンシブ化対応したテーブルです。ウィンドウを縮ませてもちゃんとここの文章が見えるはずですよ??いかがでしたでしょうか。テーブルを範囲選択してプロパティで幅を%指定に変えるだけです。各行の長さ間隔をしっかり指定する方法もありますがテキストエディタを使うので今回は割愛します。テキストエディタが使える人はおのずとやり方がわかると思うので(笑)方法2:標準テーブルを使わずプラグインを使ういくつかテーブル用プラグインはあるのですが、僕が使っているプラグインを1つ紹介します。TablePress言わずと知れたテーブルプラグイン。新規追加”プラグインの検索”フォームに「TablePress」と打ち込むとすぐに出てきます。インストール&有効化して完了。使い方は・・・もうほかのサイトで散々書かれているので割愛しておきます(笑)下記が作成したテーブルです。これはプラグインで作ったテーブルです。/]上記のようなショートコードという機能を使って呼び出しているだけです。これだけでレスポンシブ化されたテーブルが出来上がります。他にも、交互に行の色を変えたりマウスオーバーでハイライト表示させたり見やすく表示できる機能がデフォルトで搭載されています。表の見た目は”sytle.css”で変えられるので自由度も高いです。まとめ今回は2つの方法でテーブルをレスポンシブ化してみました。使い分けとしては単純な見た目のテーブル→WordPress標準搭載のテーブル結合やデザインにこだわったテーブル→TablePressプラグインでいいかなと思っています。あとはお好みでって感じですね。航空自衛隊員が過去を振り返ってみたRECOMMENDこちらの記事も人気です。@LAZY_YTMTIT企業でSEとして様々なプロジェクトに参画。ブラック企業からの転職を経験するも心身共に疲弊し、会社に属さない生き方を目指すために7年近くのSE生活に終止符を打ち個人事業主に。現在は、アラサーなフリーランサーとして生活をしています。