WordPress テーブル作成、及びスマホ対応の列幅の指定等

1 前書き
2 テーブルの列や幅を指定
- 2.1 列幅指定の簡単な方法
- 2.2 列幅指定の少し複雑な方法
3 スマホに対応できる表を作成
- 3.1 HTMLの設定例
- 3.2 CSSの設定例
4 （付録）他のテーブルの文字全体をコピーして貼り付ける方法
5 コメント
6 関連記事

前書き

WordPress の投稿に「テーブル」を挿入したい時がある、「テーブル」を使っている中で気が付いた事等を書いて行きます。自分の為の備忘録でもあります。

テーブルの列や幅を指定

上のメニュー一覧から、「テーブル」アイコンを選ぶ。
次に、列と行を指定（例：４列、５行）。
次のような表が出来る

列幅指定の簡単な方法

列の境目にカーソルに置き、左右に移動し、列幅を変更する。

列幅指定の少し複雑な方法

列幅を指定
左から仮に　１０％、２０％、４０％、３０％　とする。
まず左端の列から指定。
左端の列を上端～下端迄選択、ここで大切な事は、一番上のセルだけ選んでもダメという事（自分の失敗で分かりました）。
次に「テーブル」アイコンから、「セル」→「セルのプロパティ」を選ぶ。
「セルのプロパティ」から「幅」の所に「１０％」を入れ「ＯＫ」を押す。
同じようにして、全ての列幅を指定する。
次に表全体のスタイル「表プロパティ」でテーブルの幅に「auto」又は「100%」を指定する。
テーブル全体のスタイルや枠線のスタイル等の設定についてもは割愛します。

スマホに対応できる表を作成

スマホに対応する為には次の２点の設定が必要です。

幅の広いテーブルは、全体幅の最小値を指定して、ある幅より縮小されないようにする。
下記の場合、横幅850px以下の画面には「.gazou-min-widh-800」にて、テーブル幅を650px以下で表示しないように、「min-width:650px;」を指定しています。
テーブル全体を<div>で囲み、広い幅に対応する為にスクロール可能とする。
下記の場合、「.width-scroll」にて「overflow-x:auto」を指定し、スマホの場合横にスクロール可能としています。

HTMLの設定例

<div class="width-scroll">
<table class="gazou-min-widh-800 st-tbl1" style="border-collapse: collapse; width: 100%; height: 370px;">
<tbody>
/* ・・以下略・・ */

今回に必要な変更ケ所は次のケ所です。

CSSの設定例

/* tableに最小幅を設定 */
.gazou-min-widh-800 {
hight:auto;
width:auto;
max-width:90%;
overflow-x:auto;
}
@media only screen and (max-width : 850px)
{
.gazou-min-widh-800 {
min-width:650px;
}
}
/* divにオーバーフローでスクロール設定　*/
.width-scroll
{
width:100%;
overflow-x:auto;
}

（付録）他のテーブルの文字全体をコピーして貼り付ける方法

仮に、下記のような、テーブルの記事をコピーして貼り付けたいとする。

ブログ用	ホームページ用
cocoom LION BLOG及び LION MEDIA Stinger８ Luxeritas Xeory Base	Lightning onePress Sydney Habakiri Xeory Extension

新しく、２行、２列のテーブルを作成
コピー元の記事全体をドラッグ＆コピーする
「一番左の列の一番上のセルにカーソルを置き」、「貼り付け」を実行
すると記事が貼り付けられる。
結果は下記の通り、うまくいった。
ミソは、「一番左の列の一番上のセルにカーソルを置き」貼り付ける事である。