HTMLタグ+固定列+位置：relative +デフォルトタグなし

Question

デフォルトのタグ（table、tbody、thead、tr、td、th）を使用せずに固定列を持つHTML表の特定のレイアウトを作成します。 。

私はかなりうまく動作し、いくつかのコンテナにposition:relativeを追加する必要があることに気付いた例を開発しました。しかし、position:relativeを追加すると、レイアウトが破損します...下記の例を参照してください。

ここに質問があります。下の例のように固定/スタックカラムを使用してテーブルを作成し、position:relativeを保存するにはどうすればよいですか？

.wrapper { 
 
    overflow-x: scroll; 
 
} 
 

 
.table, .table-head, .table-row { 
 
    position: relative; /* works perfect WITHOUT this line */ 
 
    white-space: nowrap; 
 
} 
 

 
.table-head .table-cell { 
 
    background: #aaa; 
 
} 
 
.table-cell { 
 
    display: inline-block; 
 
    min-width: 50px; 
 
    border: 1px solid white; 
 
    background: #eee; 
 
} 
 

 
.fixed { 
 
    position: absolute; 
 
}

<div class="content" style="width: 400px"> 
 

 
    <div class="wrapper" style="margin-left: 50px"> 
 

 
     <div class="table"> 
 
     <div class="table-head"> 
 
      <div class="table-row"> 
 
      <div class="table-cell fixed" style="left: 0px">0</div> 
 
      <div class="table-cell">1</div> 
 
      <div class="table-cell">2</div> 
 
      <div class="table-cell">3</div> 
 
      <div class="table-cell">4</div> 
 
      <div class="table-cell">5</div> 
 
      <div class="table-cell">6</div> 
 
      <div class="table-cell">7</div> 
 
      <div class="table-cell">8</div> 
 
      <div class="table-cell">9</div> 
 
      <div class="table-cell">10</div> 
 
      </div> 
 
     </div> 
 
     <div class="table-body"> 
 
      <div class="table-row"> 
 
       <div class="table-cell fixed" style="left: 0px">a</div> 
 
       <div class="table-cell">b</div> 
 
       <div class="table-cell">c</div> 
 
       <div class="table-cell">d</div> 
 
       <div class="table-cell">e</div> 
 
       <div class="table-cell">f</div> 
 
       <div class="table-cell">a</div> 
 
       <div class="table-cell">b</div> 
 
       <div class="table-cell">c</div> 
 
       <div class="table-cell">d</div> 
 
       <div class="table-cell">e</div> 
 
      </div> 
 
      <div class="table-row"> 
 
       <div class="table-cell fixed" style="left: 0px">a</div> 
 
       <div class="table-cell">b</div> 
 
       <div class="table-cell">c</div> 
 
       <div class="table-cell">d</div> 
 
       <div class="table-cell">e</div> 
 
       <div class="table-cell">f</div> 
 
       <div class="table-cell">a</div> 
 
       <div class="table-cell">b</div> 
 
       <div class="table-cell">c</div> 
 
       <div class="table-cell">d</div> 
 
       <div class="table-cell">e</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 

 
</div>

私はあなたがこのようなposition: fixedに.fixed位置を変更した場合、どのようなここにhttps://stackoverflow.com/a/42578946/1061438

Answer 1

をインスピレーションを取りましたか？

.wrapper { 
 
    overflow-x: scroll; 
 
} 
 

 
.table, .table-head, .table-row { 
 
    position: relative; /* works perfect WITHOUT this line */ 
 
    white-space: nowrap; 
 
} 
 

 
.table-head .table-cell { 
 
    background: #aaa; 
 
} 
 
.table-cell { 
 
    display: inline-block; 
 
    min-width: 50px; 
 
    border: 1px solid white; 
 
    background: #eee; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
}

<div class="content" style="width: 400px"> 
 

 
    <div class="wrapper" style="margin-left: 50px"> 
 

 
     <div class="table"> 
 
     <div class="table-head"> 
 
      <div class="table-row"> 
 
      <div class="table-cell fixed" style="left: 0px">0</div> 
 
      <div class="table-cell">1</div> 
 
      <div class="table-cell">2</div> 
 
      <div class="table-cell">3</div> 
 
      <div class="table-cell">4</div> 
 
      <div class="table-cell">5</div> 
 
      <div class="table-cell">6</div> 
 
      <div class="table-cell">7</div> 
 
      <div class="table-cell">8</div> 
 
      <div class="table-cell">9</div> 
 
      <div class="table-cell">10</div> 
 
      </div> 
 
     </div> 
 
     <div class="table-body"> 
 
      <div class="table-row"> 
 
       <div class="table-cell fixed" style="left: 0px">a</div> 
 
       <div class="table-cell">b</div> 
 
       <div class="table-cell">c</div> 
 
       <div class="table-cell">d</div> 
 
       <div class="table-cell">e</div> 
 
       <div class="table-cell">f</div> 
 
       <div class="table-cell">a</div> 
 
       <div class="table-cell">b</div> 
 
       <div class="table-cell">c</div> 
 
       <div class="table-cell">d</div> 
 
       <div class="table-cell">e</div> 
 
      </div> 
 
      <div class="table-row"> 
 
       <div class="table-cell fixed" style="left: 0px">a</div> 
 
       <div class="table-cell">b</div> 
 
       <div class="table-cell">c</div> 
 
       <div class="table-cell">d</div> 
 
       <div class="table-cell">e</div> 
 
       <div class="table-cell">f</div> 
 
       <div class="table-cell">a</div> 
 
       <div class="table-cell">b</div> 
 
       <div class="table-cell">c</div> 
 
       <div class="table-cell">d</div> 
 
       <div class="table-cell">e</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 

 
</div>