htmlcsstwitter-bootstrapangular-formlyngx-formly

How to make bootstrap behave like a table with a sticky header?


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


Solution

  • I found it just needed to use

     class="sticky-top"