在 Angular 中滚动浏览器页面时修复表头答案

【问题标题】：Fix table thead when scroll browser page in Angular在 Angular 中滚动浏览器页面时修复表头
【发布时间】：2019-05-02 11:41:14
【问题描述】：

我想在获得首页时以角度修复 table thead。当我在表格内滚动时，滚动标题正在修复，这种情况我使用粘性但当我滚动浏览器页面时它不起作用。大声说出我想要的图像

enter image description here

在html中

 <div class="table-responsive " style="width: 100%; height: 670px;">
    <!--<table class="table table-striped table-bordered">-->
    <table class="table table-hover info">
        <thead>
        <tr style="background-color: lightskyblue;">
            <th>ID</th>
            <!--<th jhiTranslate="jhiApp.kassa.date_enter">DateEnter</th>-->
            <th jhiTranslate="jhiApp.kassa.date_prov">DateProv</th>
            <th jhiTranslate="jhiApp.kassa.date_doc">DateDoc</th>
            <th jhiTranslate="jhiApp.kassa.num_doc">NumDoc</th>
            <th jhiTranslate="jhiApp.kassa.acc_db">AccDb</th>
            <th jhiTranslate="jhiApp.kassa.bank_db">BankDb</th>
            <th jhiTranslate="jhiApp.kassa.name_db">NameDb</th>
            <th jhiTranslate="jhiApp.kassa.acc_cr">AccCr</th>
            <th jhiTranslate="jhiApp.kassa.bank_cr">BankCr</th>
            <th jhiTranslate="jhiApp.kassa.name_cr">NameCr</th>
            <th jhiTranslate="jhiApp.kassa.currency">Currency</th>
            <th jhiTranslate="jhiApp.kassa.summa">Summa</th>
            <th jhiTranslate="jhiApp.kassa.summa_eq">SummaEq</th>
            <th jhiTranslate="jhiApp.kassa.purpose">Purpose</th>
            <th jhiTranslate="jhiApp.kassa.inn_db">InnDb</th>
            <th jhiTranslate="jhiApp.kassa.inn_cr">InnCr</th>
        </tr>
        </thead>
        <tbody *ngFor="let array of kassas">

        </tbody>
    </table>
</div>

在css中

thead th {
position: sticky;
top: 0;
background-color: lightskyblue;

}

【问题讨论】：

标签： html css angular

【解决方案1】：

也许这段代码有用

thead th{
  background-color: lightskyblue;
}

thead {
  position: sticky;
  top: 0;
}

.table-responsive {
  max-height: 400px;
  overflow: auto;
  position: sticky;
  top: 0;
  background-color: #fff;
}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <h1>Table</h1>
 <div class="table-responsive " style="width: 100%; height: 670px;">
    <!--<table class="table table-striped table-bordered">-->
    <table class="table table-hover info">
        <thead>
        <tr>
            <th>ID</th>
            <!--<th jhiTranslate="jhiApp.kassa.date_enter">DateEnter</th>-->
            <th jhiTranslate="jhiApp.kassa.date_prov">DateProv</th>
            <th jhiTranslate="jhiApp.kassa.date_doc">DateDoc</th>
            <th jhiTranslate="jhiApp.kassa.num_doc">NumDoc</th>
            <th jhiTranslate="jhiApp.kassa.acc_db">AccDb</th>
        </tr>
        </thead>
        <tbody>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
           <tr>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
             <td>5</td>
           </tr>
          
        </tbody>
    </table>
</div>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>
   <p>lorem</p>

【讨论】：

【解决方案2】：

滚动<tbody> 和固定<thead>（在你的情况下，粘性<thead>）是一个日志讨论线程。

查看enter link description here的答案，尤其是这个one

如果这没有帮助，请参阅此sticky implementation here 并尽量不要使用表格，而是使用其他 html 标签，例如普通的<div>s 和相应的样式。我已经看到这个例子使用了描述列表标签。

我也遇到过类似的情况（需要固定<thead>），所以我最终采用了this 方法。我的案例暗示了材料库，但滚动“表格”主体的方法是相同的。

【讨论】：

【解决方案3】：

您可以尝试我的新 Angular 粘性库。我创建它是因为我错过了这样的功能并且没有解决方案对我有用。 https://ngx-sticky-copy.netlify.app/ 很简单，只需在 tHead 上应用 *scStickyThead 指令即可。

【讨论】：