bootstrap4-グリッド/フレックスレイアウト用の最初の行と列

Question

bootstrap4フレックス/グリッド（応答性が必要）を使用して、接続されたグリッド/テーブルレイアウトにアプローチする方法を教えていただけますか？ これは、最初の行がスティッキーで、最初の列がスティッキーな項目をナビゲーション項目として持つ表のようです。

私はw-&hを使ってみましたが、メディアクエリがなければ反応しません。 bootstrap4の最良の解決策を知りたいですか？

どうもありがとう！ :)

（恩赦私の英語...）

Answer 1

フリーズ最初の行&最初の列

しかし、1行1列の両方のために、この動作を取得するには、最初に分離する必要がありますスクロールイベント時にテーブル本体のスクロール位置に基づいてこれらの要素の位置を連続的に設定することができます。

$(document).ready(function() { 
 
     $('tbody').scroll(function(e) { 
 
     $('thead').css("left", -$("tbody").scrollLeft()); 
 
     $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5); 
 
     $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5); 
 
     }); 
 
    }); 
 

 
    
 

body { 
 
     margin: 0; 
 
    } 
 
    th, td { 
 
     text-align: center; 
 
     background-color: white 
 
    } 
 
    table { 
 
     position: relative; 
 
     width: 400px; 
 
     overflow: hidden; 
 
    } 
 
    thead { 
 
     position: relative; 
 
     display: block; 
 
     width: 400px; 
 
     overflow: visible; 
 
    } 
 
    thead th { 
 
     min-width: 80px; 
 
     height: 40px; 
 
    } 
 
    thead th:nth-child(1) { 
 
     position: relative; 
 
     display: block; 
 
     height: 40px; 
 
     padding-top: 20px; 
 
    } 
 
    tbody { 
 
     position: relative; 
 
     display: block; 
 
     width: 400px; 
 
     height: 90px; 
 
     overflow: scroll; 
 
    } 
 
    tbody td { 
 
     min-width: 80px; 
 
    } 
 
    tbody tr td:nth-child(1) { 
 
     position: relative; 
 
     display: block; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <table class="table table-bordered"> 
 
     <thead> 
 
     <tr> 
 
      <th>ID</th> 
 
      <th>Tanggal</th> 
 
      <th>Judul Pekerjaan</th> 
 
      <th>Deskripsi</th> 
 
      <th>Level</th> 
 
      <th>Category</th> 
 
      <th>Severity</th> 
 
     </tr> 
 
     </thead> 
 
    
 
     <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>1 May 2017</td> 
 
      <td>Satu</td> 
 
      <td>Satu</td> 
 
      <td>5</td> 
 
      <td>Lorem</td> 
 
      <td>Ipsum</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>2 May 2017</td> 
 
      <td>Dua</td> 
 
      <td>Dua</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>3 May 2017</td> 
 
      <td>Tiga</td> 
 
      <td>Tiga</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>3 May 2017</td> 
 
      <td>Tiga</td> 
 
      <td>Tiga</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>2 May 2017</td> 
 
      <td>Dua</td> 
 
      <td>Dua</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>3 May 2017</td> 
 
      <td>Tiga</td> 
 
      <td>Tiga</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>3 May 2017</td> 
 
      <td>Tiga</td> 
 
      <td>Tiga</td> 
 
     </tr> 
 
     </tbody> 
 
    </table>