Gutenbergでテーブルのtdの幅を指定したい

こんにちは

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をすべて均等幅にする設定です。

• この返信は5年、 4ヶ月前にnobitaが編集しました。
• この返信は5年、 4ヶ月前にnobitaが編集しました。

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

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