javascript - 如何制作表格宽度大于100%的固定表头表格

Question

我制作了一个宽度为 150% 的 bootstrap 表格。所以显然表格不适合屏幕。所以我在 div 中将其设置为水平和垂直滚动。现在我想在 div 内向下滚动时修复表头常量。我检查了堆栈溢出中的许多文章，但没有一篇适合我。所以请不要将其标记为重复。

在 VB 代码 IDE 中编码并使用 Angular

<div style="overflow-x:auto;padding: 1% 1% 1% 1%;height:calc(100vh - 236px);">
    <table class="table  table-striped table-responsive-md" style="font-family: 'Courier New';width:150%;">
        <thead class="thead-light" style="white-space: nowrap;">
            <tr>
                <th scope="col">Column 1</th>
                <th scope="col">Column 2</th>
                <th scope="col">Column 2</th>
                <th scope="col">Column 3</th>
                <th scope="col">Column 4</th>
                <th scope="col">Column 5</th>
                <th scope="col">Column 6</th>
                <th scope="col">
                    Column 7</th>
                <th scope="col">
                    Column 8</th>
                <th scope="col">
                    Column 9</th>
                <th scope="col">Column 10</th>
                <th scope="col">Column 11</th>
                <th scope="col">Column 12</th>

            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let row of Options">
                <td>Column 1</td>
                <td>Column 2</td>
                <td>Column 3</td>
                <td>Column 4</td>
                <td>Column 5</td>

                <td>
                    <mat-form-field>
                        <mat-label>Column6</mat-label>
                        <mat-select>
                            <mat-option *ngFor="let option of Options" [value]="option">
                                {{option}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>

                </td>

                <td>
                    <div class="form-row">

                            <input  placeholder="Column7">


          </div>
        </td>

        <td>
          <div class="form-row">
            <mat-form-field>
              <input matInput placeholder="Column 8 " type="number" >

            </mat-form-field>

          </div>
        </td>

        <td>
          <div class="form-row">
            <mat-form-field>
              <input matInput placeholder="Column 9" type="number" >

            </mat-form-field>

          </div>
        </td>

        <td>
          <div class="form-row">
            <mat-form-field>
              <input matInput placeholder="Column 10" type="number">

            </mat-form-field>

          </div>
        </td>

        <td>
          <mat-form-field>
            <mat-label>Column 11</mat-label>
            <mat-select>
              <mat-option *ngFor="let option of Options" [value]="option">
                {{option}}
              </mat-option>
            </mat-select>

          </mat-form-field>

        </td>

        <td>
          <mat-form-field>
            <mat-label>Column 12</mat-label>
            <mat-select>
              <mat-option *ngFor="let option of Options" [value]="option">
                {{option}}
              </mat-option>
            </mat-select>

          </mat-form-field>

        </td>

        <td>
          <mat-form-field>
            <mat-label>Column 13</mat-label>
            <mat-select>
              <mat-option *ngFor="let option of Options" [value]="option">
                {{option}}
              </mat-option>
            </mat-select>

          </mat-form-field>

        </td>
      </tr>
    </tbody>
  </table>
</div>

StackBliz 代码演示 https://stackblitz.com/edit/angular-mfny4u

我希望表头是固定的，只有表体应该向下滚动

Answer 1

希望这能解决您的问题

.table>thead>tr>th {
   background: white;
   position: sticky;
   top: 0;
   z-index: 11;
 }