Title: Gutenbergでテーブルのtdの幅を指定したい
Last modified: 2019年9月4日

---

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

 *  解決済 [asako](https://ja.wordpress.org/support/users/asako08/)
 * (@asako08)
 * [7年、 1ヶ月前](https://ja.wordpress.org/support/topic/gutenberg%e3%81%a7%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%81%aetd%e3%81%ae%e5%b9%85%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e3%81%84/)
 * Gutenbergでテーブルのtdの幅を指定したいのですが、上手くいきません。
 * 試した方法は、以下です。
    Gutenbergでテーブルを作成し、サイドバーのテーブル設定
   で固定幅に設定。HTMLとして編集で、tdにwidth=”100″を追記。更新すると、ページでは
   きちんと表示されるのですが、編集画面で「このブロックには、想定されていないか無効
   なコンテンツが含まれています。」と表示され、さわれなくなってしまいます。 「解決」
   や「ブロックのリカバリーを試行」を行うと、width=”100″が消えてしまいます。どう
   したら良いでしょうか？

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

 *  [DRILL LANCER](https://ja.wordpress.org/support/users/rickaddison7634/)
 * (@rickaddison7634)
 * [7年、 1ヶ月前](https://ja.wordpress.org/support/topic/gutenberg%e3%81%a7%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%81%aetd%e3%81%ae%e5%b9%85%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e3%81%84/#post-11658078)
 * >  `width="100"`
 * 100px なのか 100% なのか単位が書かれていないことが原因と思われます。
    もしくは`
   <td style="width: 100%;">`のように記述するのもありかもしれません。
 * それでもだめな場合、下記を試すと良いかもしれません。
    1. 任意の位置に「カスタムHTMKLブロック」を作成
    2. テーブルブロックの「HTMLとして編集」で表示されたコードを「カスタムHTMLブロック」
       に転記
    3. テーブルブロックを削除
 *  [nobita](https://ja.wordpress.org/support/users/nobita/)
 * (@nobita)
 * [7年、 1ヶ月前](https://ja.wordpress.org/support/topic/gutenberg%e3%81%a7%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%81%aetd%e3%81%ae%e5%b9%85%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e3%81%84/#post-11658132)
 * こんにちは
 * > 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をすべて均等幅に
   する設定です。
    -  この返信は7年、 1ヶ月前に[nobita](https://ja.wordpress.org/support/users/nobita/)
      が編集しました。
    -  この返信は7年、 1ヶ月前に[nobita](https://ja.wordpress.org/support/users/nobita/)
      が編集しました。
 *  トピック投稿者 [asako](https://ja.wordpress.org/support/users/asako08/)
 * (@asako08)
 * [7年、 1ヶ月前](https://ja.wordpress.org/support/topic/gutenberg%e3%81%a7%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%81%aetd%e3%81%ae%e5%b9%85%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e3%81%84/#post-11658216)
 * ご回答ありがとうございます。
    とりあえずその部分だけ、クラシックブロックに変換
   してみていますが、CSSクラスでやる方法も検討してみます。
 * テーブル設定の”固定幅に設定”は、単純に table-layout: fixed が設定されるのかと
   思っていました。
 *  [nobita](https://ja.wordpress.org/support/users/nobita/)
 * (@nobita)
 * [7年、 1ヶ月前](https://ja.wordpress.org/support/topic/gutenberg%e3%81%a7%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%81%aetd%e3%81%ae%e5%b9%85%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e3%81%84/#post-11658243)
 * > テーブル設定の”固定幅に設定”は、単純に table-layout: fixed が設定されるのか
   > と思っていました。
 * すみません、table-layout: fixed です。

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

 トピック「Gutenbergでテーブルのtdの幅を指定したい」には新たに返信することはでき
ません。

## タグ

 * [Gutenberg](https://ja.wordpress.org/support/topic-tag/gutenberg/)

 * フォーラム: [使い方全般](https://ja.wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4件の返信
 * 3人の参加者
 * 最後の返信者: [nobita](https://ja.wordpress.org/support/users/nobita/)
 * 最後の活動: [7年、 1ヶ月前](https://ja.wordpress.org/support/topic/gutenberg%e3%81%a7%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%81%aetd%e3%81%ae%e5%b9%85%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%97%e3%81%9f%e3%81%84/#post-11658243)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック