Webサイトのユーザー詳細を表示/編集するためのテーブルがあります。ユーザーごとに1行。ユーザーごとに300文字のコメントがあります。ただし、コメントを正しく表示すると、テーブル内のスペースが多すぎます。コメントを表示/非表示にするには、おそらくjavascriptを使用する必要があります。コメントを表示する最良の方法は何ですか？編集可能である必要があるため、おそらくteaxtareaタグである必要があります。
これは技術的な質問ではなく、設計原則の質問であることに注意してください。大きなコメント欄をプロ並みに表示する必要があります。
まず、テーブルの幅を真剣に考えるようにテーブルを設定します: table-layout:fixedtable 要素に設定します。
次に、「コメント」列に決められた幅を設定します。これを行う最も簡単な方法は、<colgroup><col /><col />...</colgroup>セットアップを使用することです (これを の前に配置する<thead>か、優先順で<tbody>最初<tr>に配置します)。
「コメント」列に幅を設定するだけでなく、次のスタイルを追加します。
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
これにより、テキストが適切なサイズに自動的に切り捨てられます。
次に、全体を表示できるようにする必要があります。できることは、onclickイベントでテキストをテキストを含むテキストエリアに置き換えることです。基本的な DOM 操作だけで十分に簡単です。
3 行、幅 300 ピクセル、overflow: auto の textarea を使用することにしました。これにより、テキストが大きい場合にスクロール可能になりますが、テーブルにうまく収まります。