目に見えない要素がスペースをとり、表のセルの高さを変更できない

Question

複数の行を持つ表があります。テーブルを見つけることができますHere

ドロップダウンリストからテーブルの項目を選択してください。

テーブルには、各行に1つのチームが表示されます。チームが既にプレーされている場合、試合の結果は右のセルに表示されます。試合がまだ行われていない場合は、代わりにボタンがあり、その行の下にボタンをクリックした後に表示される非表示の行があります。

私はこのテーブルと二つの問題有する：

1）隠し行とチームは、その後、他より大きな高さを有します。しかし、私は彼らの高さを変えることはできません。

2）非表示のチームでは、チーム間のギャップが1px大きくなります。この問題はtr要素によって引き起こされます。しかし、それはサイズがゼロで、 のボーダーがあるので、なぜそれはスペースを取るのですか？私はそのディスプレイを に設定して、それを取り除いた後、私のアニメーションを破壊することができました。

両方の問題は隠れた行と結びついているので、それが理由だと思います。しかし、私は本当にそれを修正する方法を知りません。

展開/崩壊がこれに行われJS：

if (this.dialogHidden) { 
     this.enterDialog.css('height', '75px'); 
     this.enterDialog.css('border-style', 'solid'); 
     this.dialogHidden = false; 
    } 
    else { 
     this.enterDialog.css('height', '0px'); 
     this.enterDialog.css('border-style', 'none'); 
     this.dialogHidden = true; 
    } 

は（CSSコード下記参照）/ enterDialog要素の崩壊アニメーショントランジションを使用して展開し

.enterDialog { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-left: 10px; 
    border: none 1px #FB667A; 
    -moz-transition: height .5s; 
    -ms-transition: height .5s; 
    -o-transition: height .5s; 
    -webkit-transition: height .5s; 
    transition: height .5s; 
    height: 0; 
    width: 100%; 
    box-sizing: border-box; 
    overflow: hidden; 
} 

Answer 1

1. チーム「結果を入力」に2％のパディングが設定されているため、隠し行の高さが大きくなります。 「foosball.css」に以下を追加します。ダミー TRが実際に隠されていないので、非表示の行と

   .tdButton { padding-top: 0!important; padding-bottom: 0!important; }

2. チームは大きなギャップがあります。これに

   if (this.dialogHidden) { 
       // this.tr.removeClass('hidden'); 
       this.enterDialog.css('height', '75px'); 
       this.enterDialog.css('border-style', 'solid'); 
       this.dialogHidden = false; 
   } 
   else { 
       // this.tr.addClass('hidden'); 
       this.enterDialog.css('height', '0px'); 
       this.enterDialog.css('border-style', 'none'); 
       this.dialogHidden = true; 
   } 
   

   ：

   if (this.dialogHidden) { 
       // this.tr.removeClass('hidden'); 
       this.tr.css("display", "table-row"); 
       this.enterDialog.css('height', '75px'); 
       this.enterDialog.css('border-style', 'solid'); 
       this.dialogHidden = false; 
   } 
   else { 
       // this.tr.addClass('hidden'); 
       this.tr.css("display", "none"); 
       this.enterDialog.css('height', '0px'); 
       this.enterDialog.css('border-style', 'none'); 
       this.dialogHidden = true; 
   } 
   

   これを変更し、

   tr.dummy{ display: none; }

そしてenterResult.jsライン157で 'foosball.css' に次の行を追加します。アニメーションを展開する行が失われることに注意してください。しかし、JQueryを使用した場合、アニメーションは1行で追加できます。

アニメーションを追加するには、ページにJqueryを追加してからenterResultを追加します。このことにより、

this.tr.css("display", "none"); 

：これで

this.tr.css("display", "table-row"); 

を：：

$(this.dom).find("tr.dummy").slideDown(); 

、これをJSライン157、これを交換

$(this.dom).find("tr.dummy").slideUp(); 

このアニメーションをバック持参してください。