How to make a fixed header table with table width more than 100%

Question

I made a bootstrap table with width 150%.So obviously the table won't fit on to the screen. So I made it as both horizontal and vertical scroll-able inside a div. Now I want to fix the table header constant while scrolling down inside the div. I have checked with many articles in stack overflow and none of them works fine for me. So please don't mark it as duplicate.

Coded in VB Code IDE and angular is used

<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 Code Demo https://stackblitz.com/edit/angular-mfny4u

I expect the table header to be fixed and only the table body should scroll down

Possible duplicate of [Table fixed header and scrollable body](https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body) — caramba, Aug 07 '19 at 09:13
@caramba Here the issue I'm facing is table's width which is more than 100%. If it is 100% % or less than that, it will work fine — Sahal, Aug 07 '19 at 09:15
why don't you try datatable easy and effective - https://datatables.net/examples/basic_init/scroll_xy.html — Sumit Patel, Aug 07 '19 at 09:17
I've answered something similar before. It should at least tick some of the boxes (https://stackoverflow.com/questions/56930376/sticky-headers-on-a-table-with-horizontal-scroll-completely-impossible/56937444) — Trickytree22, Aug 07 '19 at 09:29
Possible duplicate of ["Sticky" headers on a table with horizontal scroll... completely impossible?](https://stackoverflow.com/questions/56930376/sticky-headers-on-a-table-with-horizontal-scroll-completely-impossible) — Trickytree22, Aug 07 '19 at 09:34

score 0 · Accepted Answer · answered Aug 07 '19 at 09:54

0

Hope this will solve your issue

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

answered Aug 07 '19 at 09:54

Awais

4,752
4
17
40

Arpita Patel · Answer 2 · 2019-08-08T10:12:59.670

0

you can add this code in your css file: app.component.css

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

and also you can remove some code in your html file: app.component.html

remove padding:1% 1% 1% 1%

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

edited Aug 08 '19 at 10:12

answered Aug 07 '19 at 10:15

Arpita Patel

300
1
14

How to make a fixed header table with table width more than 100%

2 Answers2