it-swarm.com.de

Beim Verschieben einen Tabellenkopf fixieren

Ich verwende Bootstrap V4 alpha 6 zusammen mit Angular 5, um beim Scrollen eine Tabelle mit festem Header zu erstellen. Ich scheine es jedoch nicht so zu schaffen, dass es funktioniert.

Hinweis: Die navbar ist fixed-top

Dinge, die ich ausprobiert habe:

1) Fügen Sie fixed-top-Klasse zu thead hinzu.

2) 

thead {
  position: sticky;
  top: 0;
}

3) 

thead {
  display:block;
}

4) Viele CSS, aber nichts funktioniert, weil die Tabelle ansprechbar und scrollbar ist und mehrere Kopfzeilen vorhanden sind.

Was mache ich falsch?

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
    data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
    aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="./assets/logo.png" width="200" height="40" class="d-inline-block align-top" alt="">
</a>
</nav>
<table class="table table-responsive w-100 d-block d-md-table table-bordered table-striped table-fixed">
<thead class="sticky-top">
<tr>
  <th colspan="16" class="text-center">PROJECT 1</th>
</tr>
<tr>
  <th rowspan="2">WON</th>
  <th rowspan="2">LST #</th>
  <th rowspan="2">FLR #</th>
  <th colspan="3">GLS</th>
  <th colspan="7">FRMS</th>
  <th rowspan="2">Scheduled Date</th>
  <th rowspan="2">Cmplt Date</th>
</tr>
<tr>
  <th>G Reqd</th>
  <th colspan="2">G Rcvd (%)</th>
  <th>Frms Reqd</th>
  <th colspan="2">Frms Ass (%)</th>
  <th colspan="2">Frms Line (%)</th>
  <th colspan="2">Frms Cmplt (%)</th>
</tr>
</thead>

<tbody>
<tr *ngFor="let project of projectData">
  <td>{{project.ordernumber}}</td>
  <td>{{project.ListNumber}}</td>
  <td>{{project.floorID}}</td>
    <td>{{project.glassRequired}}</td>
    <td>{{project.glassReceived}}</td>
    <td>{{project.glassReceivedPercent}}</td>
  <td>{{project.framesRequired}}</td>
  <td>{{project.framesAssembled}}</td>
  <td>{{project.framesAssembledPercent}}%</td>
  <td>{{project.framesGlazed}}</td>
  <td>{{project.framesGlazedPercent}}%</td>
  <td>{{project.framesShipped}}</td>
  <td>{{project.framesShippedPercent}}%</td>
  <td>{{project.deliverydate}}</td>
 <td>Not Shipped Yet</td>
</tr>
</tbody>
</table>

Ich habe auch ein plnkr erstellt.

4
derrickrozay

Dies erreichen Sie am einfachsten, indem Sie Ihre eigene JavaScript-Funktion erstellen, um das Verhalten nach Bedarf zu ändern. Spielen Sie mit dem folgenden Code-Code herum, um Ihre Erwartungen zu erfüllen.

document.onscroll = function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 50) {
    $("thead").css({
      "position": "fixed",
      "top": "0px"
    });
    $("th").css({"padding":"15px 66px", "margin":"auto"});
  } else {
    $("thead").css({
      "position": "relative",
      "top": "0px"
    });
  }
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-borderless table-hover">
  <thead class="thead-dark">
    <tr>
      <th>Full Name</th>
      <th>Gender</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sam Tomashi</td>
      <td>Male</td>
      <td>D.R.Congo</td>
    </tr>
    <tr>
      <td>Molly Akinyi</td>
      <td>Female</td>
      <td>Kenya</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>Male</td>
      <td>France</td>
    </tr>
    <tr>
      <td>Sam Tomashi</td>
      <td>Male</td>
      <td>D.R.Congo</td>
    </tr>
    <tr>
      <td>Molly Akinyi</td>
      <td>Female</td>
      <td>Kenya</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>Male</td>
      <td>France</td>
    </tr>
    <tr>
      <td>Sam Tomashi</td>
      <td>Male</td>
      <td>D.R.Congo</td>
    </tr>
    <tr>
      <td>Molly Akinyi</td>
      <td>Female</td>
      <td>Kenya</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>Male</td>
      <td>France</td>
    </tr>
    <tr>
      <td>Sam Tomashi</td>
      <td>Male</td>
      <td>D.R.Congo</td>
    </tr>
    <tr>
      <td>Molly Akinyi</td>
      <td>Female</td>
      <td>Kenya</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>Male</td>
      <td>France</td>
    </tr>
    <tr>
      <td>Sam Tomashi</td>
      <td>Male</td>
      <td>D.R.Congo</td>
    </tr>
    <tr>
      <td>Molly Akinyi</td>
      <td>Female</td>
      <td>Kenya</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>Male</td>
      <td>France</td>
    </tr>
    <tr>
      <td>Sam Tomashi</td>
      <td>Male</td>
      <td>D.R.Congo</td>
    </tr>
    <tr>
      <td>Molly Akinyi</td>
      <td>Female</td>
      <td>Kenya</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>Male</td>
      <td>France</td>
    </tr>
    <tr>
      <td>Sam Tomashi</td>
      <td>Male</td>
      <td>D.R.Congo</td>
    </tr>
    <tr>
      <td>Molly Akinyi</td>
      <td>Female</td>
      <td>Kenya</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>Male</td>
      <td>France</td>
    </tr>
    <tr>
      <td>Sam Tomashi</td>
      <td>Male</td>
      <td>D.R.Congo</td>
    </tr>
    <tr>
      <td>Molly Akinyi</td>
      <td>Female</td>
      <td>Kenya</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>Male</td>
      <td>France</td>
    </tr>
  </tbody>
</table>

1
Sam Tomashi