Bootstrap4-用于网格/弹性布局的粘性第一行和第一列

Question

任何人都可以让我知道如何使用bootstrap4 flex / grid接近附加的网格/表格布局（必须是响应式的）？ 它就像一个粘贴的第一行和粘贴的第一列作为导航项的表。

我尝试过使用w-＆amp; h-但没有媒体查询它没有响应。想知道bootstrap4上的最佳解决方案。

非常感谢！ ：）

（原谅我的英文......）

Answer 1

冻结第一排＆amp;第一栏

但是，要为第一行和第一列获取此行为，您需要将第一行，第一列和第一个单元与表分开，然后根据滚动的位置连续设置这些元素的位置。桌面主体，滚动事件。

＆＃13;

＆＃13;

 $(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); 
      });
    });

    
   

＆＃13;

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;
    }

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;