マテリアルデザインの編集可能なテーブル
マテリアルデザインでWebアプリケーションを設計していて、そこに編集可能なテーブルがあります。
すべての列が編集可能ではない場合でも、編集可能なフィールドを示す方法に関する提案はありますか？この例では、プロテインとコメントが編集可能であるとしましょう-これをどのように視覚化する必要がありますか？
マテリアルデザイン仕様でこの提案を見つけましたが、行の複数の列を編集できる場合はどうなりますか？編集可能な各セルにアイコンを配置すると、テーブルがアイコンで乱雑になります。
行全体に対してのみ編集を許可する方が良いでしょうか？
ありがとう。
表をきれいに保つには、ホバーされたセルに編集アイコンのみを表示します。アイコンを表示するかどうかで、編集可能なセルを指定できます。 
テキストを選択可能にします：
そして編集アイコン自体にクリックハンドラーを追加します：
列幅は小さく、編集が容易ではない可能性があるため、インライン編集を使用しないことをお勧めします。ポップアップ/オーバーまたはモーダルまたは次のようなものを使用します：
別の方法として、ホバー時のインライン編集があります。編集可能なフィールドのみを表示しています。 
マテリアルデザインの提案は問題ないようです。行ごとに1つの編集アイコン。その行のすべてのフィールドを編集可能にします。 「行を編集」を追加して、何が起こるかをより明確にすることができます。
マテリアルデザインのテーブルには通常、アウトラインはありませんが、フィールドを変更できることを示す場所で編集可能なテキストフィールドUIを使用することをお勧めします。以下は2つの画像です。最初の画像はテキストなしのフィールド（およびプレースホルダー付き）を示し、2番目の画像はテキストが入力されています。 すべてを読みやすくするために、ラベルは既にテーブルの上部にあるので（塗りつぶされたテキストフィールドの上部のラベルを削除することをお勧めします（画像2を参照））。 inフィールドは空のものと同じように見えますが、他の状態を区別するために黒いテキストが表示されます）
