如何使引导程序表现得像一个带有粘性 header 的表？

Question

This is my bootstrap that I need to behave like a table. I also need the header columns to behave like a sticky header on scroll. Is this possible with just bootstrap alone?

The reason I am not using an actual table is because this will go into a formly object and formly has an issue with tables

<div class="container">
<div class="row visible-md visible-lg">
    <div class="form-group col-md-2">
        <label>First Name</label>
    </div>
    <div class="form-group col-md-2">
        <label>Last Name</label>
    </div>
    <div class="form-group col-md-2">
        <label>Address</label>
    </div>
    <div class="form-group col-md-2">
        <label>City</label>
    </div>
    <div class="form-group col-md-2">
        <label>State</label>
    </div>
    <div class="form-group col-md-2">
        <label>Zip Code</label>
    </div>
</div>
<div class="row">
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">First Name</label>
        Jake
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Last Name</label>
        Elwood
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Address</label>
        1060 W Addison St
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">City</label>
        Chicago
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">State</label>
        IL
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Zip Code</label>
        60613
    </div>
</div>
<div class="row">
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">First Name</label>
        John
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Last Name</label>
        Wayne
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Address</label>
        18601 Airport Way
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">City</label>
        Santa Ana
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">State</label>
        CA
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Zip Code</label>
        92707
    </div>
</div>
</div>

https://stackblitz.com/edit/angular-eyo4a8-gnrknm?file=app%2Fdatepicker-date-class-example.html

Answer 1

I found it just needed to use

 class="sticky-top"

Answer 2

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

This sticky class is added to the navbar with JS when it reaches it's scroll position. Use this sticky code for the header columns that you needed to the add.