入力ボックスの行がdinamically追加されたときにテーブル内の列の幅が変更される

Question

The table before the row with input-boxes is shown 上記の画像に示すように、最初の行にはその行を表示/非表示するためのボタンがあります下の画像のような入力ボックスがあります。

The table where the row with input boxes is shown 問題は、入力ボックスを含む行が表示されるときに列の幅が変更されることです。 （画像から幅の前後の列の違いを見ることができます）
そして、入力ボックスの幅は100％に設定されています。 また、パディングと境界線も変更されていません。幅はtdだけです。 問題は、以下のコードのように、固定幅を設定せずに列の同じ幅をどのように指導できますか？

td { width: 50px;}

さらに、

white-space: nowrap

を追加しても機能しません。

ここは、入力ボックスで行を表示するためのコードの一部です。

<tr v-if="showFilters"> 
    <td v-for="key in filterKeys" v-if="key.visible"> 
     <div class="input-group"> 
      <pf-text-field v-model="key.value" tooltip="Filter"> </pf-text-field> 
     </div> 
    </td> 
</tr> 

Answer 1

flexプロパティを試しましたか？

td { 
display : flex; 
} 

理論的には、孤独な子供の場合、デフォルトサイズは100％にする必要があります。パディングを追加して適応させることができます。

Answer 2

ブラウザにテーブルセルの推奨サイズを指定しないと、各列の最も広い表セルの幅に基づいて幅を比例的に調整しようとします。これらは入力フィールドが表示されるとすぐに表示されます（幅は100％です）。

小さいデータを保持するため、一部の列を他の列よりも小さくしたいとします。これに％ベースの幅を使うことができます。必要に応じて、min-widthまたはmax-widthも便利です。サイトが応答性があり、最小幅が常に保持されるようにしてください。例えば。

td { 
    width: 25%; 
    min-width: 50px; 
} 

ヒント：

table { 
    table-layout: fixed; 
} 

：一部の細胞が大きくなりすぎた場合にはいくつかの奇妙な行動を妨げる可能性がある別のテーブルレイアウトを使用します