④_WordPressで表をスクロールする方法。さらに縦線入れる方法。

やり方
WordPressログイン→ダッシュボード→投稿→新規追加→画面右上にある「ツールと設定をさらに表示」クリック→エディターのビジュアルエディターをコードエディターに変更して、以下コピペして下さい。


<div style=”overflow: auto;”>
<table style=”width: 730px;”border=”2″ >
<tbody>
<tr>
<td>1行1列目</td>
<td>1行2列目</td>
<td>1行3列目</td>
</tr>
<tr>
<td>2行1列目</td>
<td>2行2列目</td>
<td>2行3列目</td>
</tr>
</tbody>
</table>
</div>

上記コピペすると以下のようにスクロールできる表ができます。

1行1列目 1行2列目 1行3列目
2行1列目 2行2列目 2行3列目

簡単な説明
・上記5行目以降の「1行1列目」等は任意に変更してください。表の中に記載する文字になります。
・表の列を増やしたいときは、
<td>1行3列目</td>の下に<td>1行4列目</td>を追加してください。
・表の行を増やしたいときは、
<tr>
<td>2行1列目</td>
<td>2行2列目</td>
<td>2行3列目</td>
</tr>
の下に、
<tr>
<td>3行1列目</td>
<td>3行2列目</td>
<td>3行3列目</td>
</tr>
を追加してください。
・1列目と2列目の間隔が広くて気になるときは、
表をクリック→表の四隅に□が出てくる→そこにカーソルを合わせる→矢印が出てくる→矢印をクリックしたまま移動させるとお好きなように調整可能
・上記2行目の「border=”2″ 」により、表に縦線が入ります。




調べて試して出来るまで2.5hかかった。
以下全て調べて試したところ。私の条件と合わなかったためか工夫してなんとか出来た。
参考にさせて頂いた全てのホームページ作成者の皆様ありがとうございました。

「wordpress 表 スクロール」で検索

参考その1
「【WordPress】スマホで表(テーブル)が見切れる場合はスクロールと …」
https://nishinatoshiharu.com/customize-scroll-responsive-table/
試しその1:結果は、変化なし。
(Wordpressログイン→ダッシュボード→外観→画面右側の「テーマのための関数」をクリック→その中の1番下の行に指示されたものを貼付)

参考その2
「【簡単コピペ】WordPressで表を崩さず横スクロールするHTML」
https://helppo-station.com/html-table-scroll
試しその2:結果は、 スクロールは出来たが縦線入らず。○
(Wordpressログイン→ダッシュボード→投稿→新規追加→画面右上にある「ツールと設定をさらに表示」クリック→エディターのビジュアルエディターをコードエディターに変更して、指示されたものを貼付)

参考その3
「ワードプレス 表の縦線が表示されない 」
https://fox-god.com/photodiary/wp/archives/718
試しその3:結果は、指示された「テーブル」が私の画面にはなかった。

参考その4
「表の縦線について教えて下さい。 | WordPress.org」
https://ja.wordpress.org/support/topic/%E8%A1%A8%E3%81%AE%E7%B8%A6%E7%B7%9A%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E6%95%99%E3%81%88%E3%81%A6%E4%B8%8B%E3%81%95%E3%81%84%E3%80%82/
試しその4:結果は、変化なし。
(Wordpressログイン→ダッシュボード→外観→カスタマイズ→追加CSS→指示されたものを貼付)

参考その5
「WordPress 表の縦線 が表示されない時の表示方法 – webNote」
https://book7.coresv.com/wp-table2
試しその5:結果は、1部参考になった。○
(Wordpressログイン→ダッシュボード→外観→画面右側の「スタイルシート」をクリック→その中の1番下の行に指示されたものを貼付。)
(Wordpressログイン→ダッシュボード→投稿→新規追加→画面右上にある「ツールと設定をさらに表示」クリック→エディターのビジュアルエディターをコードエディターに変更→先程の参考その2で指示されたものの2行目に「border=”2″ 」を追加したら縦線入った。)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です