サポート » プラグイン » Flexible tableのCSS編集

  • 解決済 iyuya0623

    (@iyuya0623)


    flexible tableで、スマホ等で閲覧している時など、横幅が足りない場合に表の中の文字が入りきらない場合、残りの文字を消して「…」などで表示するようにしたいです。

    CSSをどうやって編集すればいいのか、セレクタ名などを教えていただきたいです。

    cocoon・エックスサーバーを使用しています。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • shokun0803

    (@shokun0803)

    iyuya0623さん、こんにちは。

    WordPress と言うより単純に CSS の話だと思いますので、回答が付きづらいかもです。例えば以下のような方法ではいかがでしょうか(未検証)。

    
    <table>
    <tr><td><p>abcdefghijklmn</p></td></tr>
    </table>
    
    table tr td p {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    他に良い方法があるような気もしますが… CSS 等のフォーラムで聞いてみると良いのではないでしょうか。

    ご参考になれば。

    トピック投稿者 iyuya0623

    (@iyuya0623)

    ご回答ありがとうございます!

    まだCSSを触ったことがなく、このコードはどこに貼り付ければいいのでしょうか?

    初歩的なことですみません…

    Aki Hamano

    (@wildworks)

    こんにちは。

    残りの文字を消して「…」などで表示するようにしたいです。

    これを行ってしまうと、ユーザーが必要な情報を視認できなくなるのではないかと懸念しています。

    もし、Flexible Table Block プラグインの事を言っているのでしたら、モバイルでスクロールするように設定してみてはどうでしょうか。「テーブルの横幅」の値は、適宜調整してみて下さい。

    https://gyazo.com/83fbd245cd09709e3ea137d1268c221b

    トピック投稿者 iyuya0623

    (@iyuya0623)

    ご返事ありがとうございます。

    テーブルの横幅を変更して、スクロールする方法も考えたのですが、やはり1画面内に表示させたいです。

    また、表の中の文字はそこまで重要ではなく、補助的なものなので「…」でいいかなと考えています。

    そのCSSを書く場所と、flexible tableのセレクタ名を教えていただければ幸いです。

    Aki Hamano

    (@wildworks)

    それでは、アプローチの一例を記載します。

    • ブロックのサイドバーから「表のセル幅を固定」をオンに
    • 以下のCSSを記載
    .wp-block-flexible-table-block-table th,
    .wp-block-flexible-table-block-table td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    おそらくお使いのテーマはクラシックテーマだと思うので、「外観 > カスタマイズ > 追加CSS」に上記CSSを記載して下さい。

    ただし、この設定は全てのFlexible Table Blockに影響します。特定のブロックに適用したい場合は、ブロックに追加CSSクラスを適用の上、上記コードのセレクタを適宜調整して下さい。

    この辺りは、WordPressの使い方やCSSの基本的な話となるので、ご自身で一度勉強されてみても良いかと思います。

    トピック投稿者 iyuya0623

    (@iyuya0623)

    ありがとうございます!

    うまくCSSが反映されました。

    今までサポートしていただき、ありがとうございました。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。