2020.05.02日本の証券会社で米国株[チャレンジ32か月目]2023.05.01横に長い表(テーブル)に対して横スクロールができるようにするという技はちまたで結構使われています。人気WordPressのテーマ、Cocoonでも横スクロールを出すオプションが用意されており、私もありがたく使わせてもらっています。横スクロール表示対応のレスポンスでテーブル設定方法です。wp-cocoon.comだいたいイイ感じで表を作ってくれるのですが、表内に改行のない長い文を入れるとセル内で折り返しがされないため、表がめちゃめちゃ横長になります。横スクロールの表でも長文は折り返しするようにしたい!横スクロールの表の列幅を指定したい!そんなあなたに横スクロールの表に改行のない長文を入れた場合でも、簡単に理想の列幅を手に入れる方法を伝授します。長文が狙った長さで折り返されるようになる。処理の方法ステップ1.折り返したい項目にスタイルを追加ステップ2.列幅を思い描く理想の形に近づけるおまけ:横スクロールを止める方法あとがき処理の方法いきなり本題です。処理は2ステップで完了です。折り返されないのは改行が入っていない長文です。style="white-space:normal"」を追加します。反転している部分が変更を加えた部分です。(表のコードはCocoonのものです)ステップ1(スタイルを付与)分かりやすいようにコードを整形したパターンも書いておきます。</tbody></table>スタイルを追加することで、長文がセル内で折り返しされるようになりました。高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだらステップ2.列幅を思い描く理想の形に近づけるステップ1で終了!となることもありますが、列幅が気に食わない場合には追加の処理を行います。列幅が足りないと思った列のセルの1つに全角スペースを追加します。することで疑似的に幅を利かせた列(シークレット幅広マン)を作り上げます。反転している部分が変更を加えた部分です。今回は「氏名」列が狭いと感じたので、全角スペースを前後に10個ずつ入れてみました。横長になりすぎた表への対応として、横スクロールをしない表にするというものもあります。オススメとしては上記で紹介した方法ですが、需要もあると思いますのでおまけとして記載します。Cocoonの場合は、記事の「カスタムCSS」欄に下記のCSSを追加することでブログ全体の設定は横スクロール有の表のままで、特定の記事内の表のみ横スクロールなしとすることができます。高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら表にclassを指定すれば、ページ内にスクロール有の表となしの表を混在させることも可能ですあとがき「スクロールを無くすと表が狭苦しくなってしまう」「適宜改行を入れるのは難易度が高い」ということで何か簡単に調整できる方法はないかと探った結果、この方法に辿り着きました。図らずも横に長すぎる表を生み出してしまったあなたのお役に立てればいいのですが...我ながら地味な記事です。ウィジェット米国株ブログランキングに参加しています。関連記事Tips【Cocoon】特定の投稿ページのアイキャッチ画像を非表示にする方法Cocoonで特定の投稿ページのアイキャッチ画像を非表示にする方法を紹介します。APIを利用したPHPでのツイッター検索結果の取得の基本をお伝えします。APIを利用したPHPでのタイムラインの取得方法の基本をお伝えします。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。@munokuno興味本位で投資の世界に飛び込み、溺れ続けるリーマン投資家。投資歴は無駄に長く20年弱。ライブドアショック、リアルリーマンショック経験者。逆指標として使えます。日本株メタトレーダー5その他投資関連マーケティング生産性アップTipsシェアするあなたのシェアが、力になる。TwitterFacebook0はてブ0Pocket3LINEフォローする\クノウをフォローする/キャッチ・ミー・イフ・ユー・キャン0。