賢威8のデフォルトのテーブル

賢威8ではデフォルトでいくつかのテーブルスタイルが用意されています。

以下のコードを投稿画面に貼り付けるだけで綺麗な表が完成します。

見出しの位置(縦横)を替えると以下のような表になります。

一般的に良く使うテーブルは次のスタイルでしょうか。

いずれのコードも、項目名や項目内容のセルの位置が理解できれば、どこにどの項目を書き込むか判ると思います。

また、スマホ画面でもそれぞれ綺麗にテーブルが表示されています。

テーブルの文字列を折り畳まないようにする

ただ、これが項目内容の文字数が多く記事枠をはみ出る場合だと、セルの中で文字列が折り畳まれて表示されてしまいます
せっかくテーブルで見やすくしたのに、かえって見にくくなっているようです。

スマホだともっと悲惨な状態に。

そこで、テーブル内の文字列を折り畳まないようにして、記事枠をはみ出したら、横にスクロールするようにします。

まず、以下のコードを追加CSSか子テーマのbase.cssに追加します。

そしてテーブル全体を
table-scrollのコードで囲みます。

上はPCでの画面です。
セル内の文字列が折り畳まれずに横幅がはみ出るのですが、その分、表の下にスクロールバーが表示されて、横スクロールして全体が見られるよになります。

これが、スマホ画面だとこちらになります。

どちらも横スクロールで表全体が見やすくなってきます。

ただ、スマホ表示の
※スクロールできます
は、変更したいですね。

「表は横にスクロールできます。」とか。

カスタマイズするには以下のコードを追加CSSか子テーマのbase.cssに追加します。

スマホで見てみると・・・

こちらの方がわかりやすいと思いませんか?

まとめ

追加CSSか子テーマのbase.cssに以下のコードを追加する

以下のコードでテーブル部分を囲む。

これで、いつでも見やすいテーブルが出来ると思います。