在Angular中滚动浏览器页面时修复tablethead

时间：2018-11-30 10:16:52

标签： html css angular

当它到达首页时，我想固定桌子thead的角度。当我在表内滚动时，滚动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;

}

2 个答案:

答案 0 :(得分：0)

也许这段代码有用

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>

答案 1 :(得分：0)

用固定的<tbody>滚动<thead>（在您的情况下，粘滞<thead>）是讨论日志的主题。

请参阅enter link description here的答案，尤其是此one

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

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

相关问题
最新问题