如何制作表格宽度大于100％的固定标题表

Question

我制作了一个宽度为150％的引导表，因此显然该表无法放在屏幕上。 因此，我在div中将其设置为可水平和垂直滚动。 现在，我想在div内向下滚动时修复表头常量。 我检查了堆栈溢出中的许多文章，但没有一篇对我有用。 因此，请不要将其标记为重复项。

在VB Code IDE中编码，并使用了角度

<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;
 }

Answer 2

您可以在您的CSS文件中添加以下代码：app.component.css

thead{
  position: sticky;
  top:0;
  z-index: 1;
  background-color: #1976D2;
  color: #fff;
}

并且您还可以删除html文件中的一些代码：app.component.html

删除填充：1％1％1％1％

<div style="overflow-x:auto;height:calc(100vh - 236px);">