テーブルビルダーの編集アイコンをタブレットやモバイルで非表示にする？

[Jagster (Jakke Lehtonen)]

ウィザードの皆さん、ご指導をお願いします。

テーブルビルダーはモバイルやタブレットでは全く役に立ちません。何もできないからです。そのため、テーブルの編集アイコンは非表示にすべきです。今はただのノイズで、混乱させるだけです。

CSSは明白なツールです。もし他の解決策があれば、それが使われていたはずですよね？しかし、その不要な鉛筆アイコンを非表示にする方法については、全く理解できません。

[jericson (Jon Ericson)]

理想的ではありませんが、携帯電話でこの表を作成しました。

列 1	列 2	列 3	列 4
この表は携帯電話で作成されました。	不可能ではありません。ダブルタップするとキーボードが開きます。
余分な行を削除する方法はわかりません。	ああ！作成後に編集するだけです。

列を削除するのは非常に手間のかかる編集なので、やりませんでした。

[Jagster (Jakke Lehtonen)]

iPadやiPhoneでは、非常に速いダブルタップが必要です。しかし、それでも編集はコンポーザーの方がはるかに簡単で、行の追加や削除などが必要になった場合、テーブルエディターではできません。

2つの異なるエディターがあり、ユーザーは必要な編集の種類に応じてどちらを使用するかを選択しなければならないのは、単に悪いUXです。そのため、小さい画面ではコンポーザーにリダイレクトされるべきであり、そのためにはテーブルエディターの鉛筆アイコンを隠すのが最も簡単な方法です。

これはおそらく、私がWYSIWYGタイプのデザインに反対する初めてのことです。おそらく、それが非常に不十分だからでしょう。

[keegan (Keegan George)]

モバイルで編集テーブルボタンを非表示にするために使用できるCSSスニペットを次に示します。

.mobile-view .fullscreen-table-wrapper:hover .fullscreen-table-wrapper__buttons .btn-edit-table {
  display: none;
  opacity:0;
}

[Jagster (Jakke Lehtonen)]

どうもありがとう！\n\nこれで、私の試みがうまくいかなかった理由がわかりました。まあ、ほとんどわかりました。なぜ opacity:0 なのでしょうか？