html - Create multiple headers sticky boostrap in Css

I have multiple boostrap rows like this. I would like to have both the headers sticky in CSS. But no luck.

CSS

.sticky {
  top: 0 px;
}

<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
  <div class="row sticky-top bg-white">
    <div class="col-md-1">HEADER</div>
    <div class="col-md-11">HEADER</div>
  </div><!-- row -->

  <div class="row sticky-top bg-white sticky-top1">
    <div class="col-md-1">HEADER2</div>
    <div class="col-md-11">HEADER2</div>
  </div><!-- row -->
  <!-- some data -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
</div>

I have multiple boostrap rows like this. I would like to have both the headers sticky in CSS. But no luck.

CSS

.sticky {
  top: 0 px;
}

<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
  <div class="row sticky-top bg-white">
    <div class="col-md-1">HEADER</div>
    <div class="col-md-11">HEADER</div>
  </div><!-- row -->

  <div class="row sticky-top bg-white sticky-top1">
    <div class="col-md-1">HEADER2</div>
    <div class="col-md-11">HEADER2</div>
  </div><!-- row -->
  <!-- some data -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
</div>

Share Improve this question edited Feb 4 at 9:14 Vel 9,3426 gold badges40 silver badges70 bronze badges asked Feb 4 at 1:07 Gauravsa 6,5282 gold badges23 silver badges32 bronze badges

You don't use position: sticky anywhere. It raises the question. Probably, you mean by sticky something else. Could you please explain what do you mean? – Sergey A Kryukov Commented Feb 4 at 2:48
Post your CSS code. Which version your are using? – Vel Commented Feb 4 at 3:51
"I would like to have both the headers sticky in CSS. But no luck." - yes luck, because they are both sticky. What you don't appear to realize, is that they are both sticky in the same position, at the very top of the container - so that they overlap each other. You need to specify an "offset" from the top for the second one, where it is supposed to "start sticking", using the top property. – C3roe Commented Feb 4 at 8:29

Add a comment |

2 Answers 2

Sorted by: Reset to default 2

You want like this?

CSS

.sticky {
  top: 0 px;
}

 <style>.sticky-top1{    top: 50px !important;}</style>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
  <div class="row sticky-top bg-white">
    <div class="col-md-1">HEADER</div>
    <div class="col-md-11">HEADER</div>
  </div><!-- row -->

  <div class="row sticky-top bg-white sticky-top1">
    <div class="col-md-1">HEADER2</div>
    <div class="col-md-11">HEADER2</div>
  </div><!-- row -->
  <!-- some data -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
</div>

<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
  <div class="row sticky-top bg-white">
    <div class="col-md-1">HEADER1</div>
    <div class="col-md-11">HEADER2</div>
    <div class="col-md-1">HEADER3</div>
    <div class="col-md-11">HEADER4</div>
  </div><!-- row -->

  <!-- <div class="row sticky-top bg-white">
    <div class="col-md-1">HEADER3</div>
    <div class="col-md-11">HEADER4</div>
  </div> --><!-- row -->
  <!-- some data -->
  <div class="row">
    <div class="col-md-1">id5</div>
    <div class="col-md-3">L Name5</div>
    <div class="col-md-1">M5</div>
    <div class="col-md-2">F Name5</div>
    <div class="col-md-3">Username5</div>
    <div class="col-md-2">Phone5</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div><!-- row -->

  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
  <div class="row">
    <div class="col-md-1">id</div>
    <div class="col-md-3">L Name</div>
    <div class="col-md-1">M</div>
    <div class="col-md-2">F Name</div>
    <div class="col-md-3">Username</div>
    <div class="col-md-2">Phone</div>
  </div>
</div>

I suggest that you can put all sticky columns in a row.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Create multiple headers sticky boostrap in Css - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)