html - 绝对元素的CSS全宽

Question

我有一个带有下拉过滤器内容字段的表格。下面的例子。我想要 下拉内容与表格的宽度完全相同。我怎样才能做到这一点？如果我将 width:100% 放在 .dropdown-content 类中，宽度就太大了。

.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

表格中的 div 不正确，但您仍然可以在表格中使用它...并且表格样式应为 <table style="width:100%"> ... 使用 box-sizing: border-box (它包括宽度内的内容、填充和边框)以修复 100% 的填充问题...

.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>