サポート » 使い方全般 » Gutenbergでテーブルのtdの幅を指定したい

  • 解決済 asako08

    (@asako08)


    Gutenbergでテーブルのtdの幅を指定したいのですが、上手くいきません。

    試した方法は、以下です。
    Gutenbergでテーブルを作成し、サイドバーのテーブル設定で固定幅に設定。HTMLとして編集で、tdにwidth=”100″を追記。更新すると、ページではきちんと表示されるのですが、編集画面で「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示され、さわれなくなってしまいます。
    「解決」や「ブロックのリカバリーを試行」を行うと、width=”100″が消えてしまいます。どうしたら良いでしょうか?

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • RICK

    (@rickaddison7634)

    width="100"

    100px なのか 100% なのか単位が書かれていないことが原因と思われます。
    もしくは<td style="width: 100%;">のように記述するのもありかもしれません。

    それでもだめな場合、下記を試すと良いかもしれません。

    1. 任意の位置に「カスタムHTMKLブロック」を作成
    2. テーブルブロックの「HTMLとして編集」で表示されたコードを「カスタムHTMLブロック」に転記
    3. テーブルブロックを削除

    こんにちは

    HTMLとして編集で、tdにwidth=”100″を追記。更新すると、ページではきちんと表示されるのですが、編集画面で「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示され、さわれなくなってしまいます。

    width=”100″は、HTML4では、100pxとして解釈されるので、間違いではないのですが、HTML5では、そういう属性は使わないで、スタイルを使うようになっています。

    Convert to HTMLボタンを押すと、HTMLブロックに変換されるので大丈夫だと思いますが、HTMLブロックが嫌な場合は、以下のようにするといいです。

    テーブルブロックを選択して、右メニューの一番下のadvancedを開いて、CSSクラスを追加します。

    my-table を追加したとします。

    カスタマイザーのカスタムCSSに、スタイルを追加します。

    
    .my-table td:nth-child(1){
        /* 一列目 */
            background:#ccc;
            color:#333;
            width:2rem;
    }
    .my-table td:nth-child(2){
         /* 二列目 */
            background:#bbb;
            color:#333;
            width:3rem;
    }
    .my-table td:nth-child(3){
        /*三列目*/
            background:#999;
            color:#fff;
            width:4rem;
    }
    

    このようにすると、ブロックテーブルのままで、変更できます。

    テーマによっては、上記のスタイルが適用できない場合もあるかもしれません。その時には、「CSS 詳細度」などでググって、詳細度を上げてください。

    テーブル設定で固定幅に設定。

    個々のTDに幅を設定する時には、これは設定しないでください。
    TDをすべて均等幅にする設定です。

    • この返信は1 週、 6 日前に  nobita さんが編集しました。
    • この返信は1 週、 6 日前に  nobita さんが編集しました。

    ご回答ありがとうございます。
    とりあえずその部分だけ、クラシックブロックに変換してみていますが、CSSクラスでやる方法も検討してみます。

    テーブル設定の”固定幅に設定”は、単純に table-layout: fixed が設定されるのかと思っていました。

    テーブル設定の”固定幅に設定”は、単純に table-layout: fixed が設定されるのかと思っていました。

    すみません、table-layout: fixed です。

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