如何制作表格寬度大於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);">