0

Backgrid を使用すると、テーブル内の値を編集でき<input type="text">ます<td>。入力はに設定されてmax-width: 100%いますが、場合によっては列のサイズがさらに押し出されます。

例については、例セクションのグリッドを参照し、[人口] 列の項目をクリックしてください。クラスを取得するとeditor、そのパディングは 0 に設定され、 と の両方が<td>あり<input>ますbox-sizing: border-boxが、列の幅は依然として増加します。

ということは当時のままwidth: 100%の幅100％ということではないでしょうか？<td>それとも、CSS のみを使用してこれを機能させることは不可能ですか? バックボーン イベントを使用して td のサイズを取得し、入力を同じサイズに設定することもできますが、それは少しハックに聞こえます。

4

1 に答える 1

3

テーブル列の幅を計算する方法は簡単ではありません。より多くのコンテンツを含む列がより大きなシェアを獲得するように、使用可能なスペースを列間で分配しようとします。

「コンテンツは列と同じ大きさにする必要があります」と言うと、コンテンツの幅と列の幅の間に循環的な依存関係が作成されるため、さらに複雑になります。

ということは当時のままwidth: 100%の幅100％ということではないでしょうか？<td>

いいえ。何かが変わると、すべてが更新されます。CSS は履歴を保持しないため、特定の時点での要素の幅はわかりません。つまりwidth: 100%、すべてが更新された後、入力は と同じ幅になり<td>ます。しかし、それは変更前とは異なる可能性があります。

あなたの問題に対する完璧な解決策はありませんが、いくつかのアイデアがあります：

  • JavaScriptを使用してコンテンツを置き換える前に、列幅を確認してください（質問ですでに指摘したように）
  • 固定テーブル レイアウトを使用します。このようにして、すべての列が同じ幅になり、内容に基づいて変化しません。
  • 入力要素を使用する代わりにに設定contenteditableします。<td>これは、少なくとも実際にコンテンツを編集しない限り、列の幅に影響を与えるべきではありません。
于 2014-09-24T20:56:10.027 に答える