テーブルの内容が重複しないようにDiv要素にhtmlテーブルを表示しますか？

Question

のHTMLページ

<div *ngIf="visibleTournament"> 
    <div class = "row"> 
    <div *ngFor="let entry of competitionTeams | keys"> 
     <div class="col-md-4"> 
     <div> 
      <div (click) = "entry.hideme = !entry.hideme" (mouseleave)= "entry.hideme = false"> 
      <div class = "groupBox"><div class="placed"><h3><span class = "label label-warning">Group - {{entry.key}}</span></h3></div></div> 
      </div> 
      <div class="well box" [hidden] = "!entry.hideme"> 
       <table class="table"> 
        <thead class="thead-inverse"> 
        <tr> 
        <th>#</th> 
        <th>Team</th> 
        <th>Played Games</th> 
        <th>Points</th> 
        <th>Goals</th> 
        <th>GA</th> 
        <th>GD</th> 
        </tr> 
        </thead> 
       </table> 

は、私は私が既存のdivの代わりに自分の位置から移動するのdivののの上に対応するdiv要素をクリックしたときにテーブルを表示します。テーブルの幅を広げて、見やすくします。テーブルを作成する方法

私のCss

.avatar{ 
    width:30px; 
    height:30px; 
    margin-right: 10px; 
} 

.inline{ 
    display: inline-block; 
    margin: 10px 20px; 
} 

.check{ 
    min-width: 500px; 
} 

.selector{ 
    cursor: pointer; 
} 
.placed{ 
    margin: 0 auto; 
} 

.box{ 
    position: relative; 
    text-align: center; 
    background: #ccffda; 
    padding: 10px 20px; 
    width : 100%; 
    height: 100%; 
    border: darkgray 1px solid; 
} 


.groupBox{ 
    text-align: center; 
    background: lightsteelblue; 
    padding: 20px 20px; 
    margin: 2px; 
    border: darkgray 1px solid; 
    cursor: pointer; 
} 


.fix{ 
    position: absolute; 
} 

既存elemnts場合は一番上に表示され、また、コル幅を超えるテーブルの幅を広げます。

私はあなたが流れから要素を削除するabsolute positioningを使用することができます

Answer 1

を助けてくださいCSS上の専門家ではありませんよ。この方法では、後続のグループボックスを押し下げることはありません。これはまた、要素をin front ofの他の要素にレンダリングさせます。

要素にposition: absoluteがある場合、その座標は、positionが絶対値またはrelativeに設定されている親に対して解決されます。したがって、を祖先に設定して、topとleftをグループに合わせて整列させることができますが、グループは自分自身のためのスペースを確保できます。