CSS full width of absolute element

Question

I have a table with a drop-down filter content field. Example below. I want the dropdown content to have exactly the same width as the table. How can I do this? If I put width:100% inside the .dropdown-content class, the width is too big.

 .dropdown { position: relative; display: block; } .dropdown-content { display: block; position: absolute; background-color: #f9f9f9; box-shadow: 5px 8px 16px 5px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 1; margin-top: -15px; } .dropdown:hover .dropdown-content { display: block; }

 <table style="width:100%"> <div *ngIf="filtering" class="dropdown"> <span></span> <div class="dropdown-content" flex layout="row" layout-wrap> <mat-form-field class="searchFields" flex> <input name="test" flex type="number" matInput [(ngModel)]="test" placeholder="test"> </mat-form-field> </div> </div> <tr> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </table>

Answer 1

A div within a table is incorrect but still you can use it within table... and the table style should be <table style="width:100%"> ... use box-sizing: border-box (it includes the content, padding and border within the width) to fix the 100% with padding issue...

 .dropdown { position: relative; display: block; } .dropdown-content { display: block; position: absolute; background-color: #f9f9f9; box-shadow: 5px 8px 16px 5px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 1; margin-top: -15px; width:100%; box-sizing: border-box; } .dropdown:hover .dropdown-content { display: block; }

 <table style="width:100%"> <div *ngIf="filtering" class="dropdown"> <span></span> <div class="dropdown-content" flex layout="row" layout-wrap> <mat-form-field class="searchFields" flex> <input name="test" flex type="number" matInput [(ngModel)]="test" placeholder="test"> </mat-form-field> </div> </div> <tr> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </table>

Answer 2

Auto Width Content

This is How I did it

In the below code, I added a div called content and gave it a width of auto . I then made your dropdown a 100% - 32px for the padding using the CSS calc function.

width: calc(100% - 32px) ;

However, using box-sizing: border-box; with width: 100%; is probally better.

I also added some background colour and made the drop down slightly transparent so you could see it better.

 .content { display:inline-block; width:auto; background:#ddd; } .dropdown { position: relative; display: block; } .dropdown-content { display: block; position: absolute; background-color: rgba(249, 249, 249, 0.79); box-shadow: 5px 8px 16px 5px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 1; margin-top: -15px; width: calc(100% - 32px); } .dropdown:hover .dropdown-content { display: block; }

 <div class="content"> <table style="width=100%"> <div *ngIf="filtering" class="dropdown"> <span></span> <div class="dropdown-content" flex layout="row" layout-wrap> <mat-form-field class="searchFields" flex> <input name="test" flex type="number" matInput [(ngModel)]="test" placeholder="test"> </mat-form-field> </div> </div> <tr> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </table> </div>

Answer 3

It is bad practice to used div with in table . and the table should style like this <table style="width:100%">

For your question, It because you add padding in dropdown-content , so the total width is: 100% + 32px(padding left & right), So Add box-sizing:border-box (it includes the content, padding and border within the width) in dropdown-content , So it was fixed issue with padding and 100% width.

Here is link for more clarification:

 .dropdown { position: relative; display: block; } .dropdown-content { display: block; position: absolute; background-color: #f9f9f9; box-shadow: 5px 8px 16px 5px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 1; margin-top: -15px; box-sizing: border-box; /* Add this*/ width: 100%; /* Add this*/ } .dropdown:hover .dropdown-content { display: block; }

 <table style="width:100%"> <div *ngIf="filtering" class="dropdown"> <span></span> <div class="dropdown-content" flex layout="row" layout-wrap> <mat-form-field class="searchFields" flex> <input name="test" flex type="number" matInput [(ngModel)]="test" placeholder="test"> </mat-form-field> </div> </div> <tr> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </table>