如何根據子表寬度設置 select 框寬度 - css

Question

在我的 vue 應用程序中，我設計了一個帶有表格組件的 select 盒子。 單擊 select 框時，表格在容器中可見。 現在，問題是我無法根據表格寬度設置 select 框的動態寬度。

現在，由於 select 框的固定寬度，表格行重疊。 它正在向上打開容器。 由於寬度，有一個滾動。

這是我的代碼

    <div class="dropdown_grid my-dropdown--medium>
 ... div related to title and toggle
 
 // here is the container
 <div
      class="dropdown_grid_container"
      ref="floating"
      v-ur-attach-root:fit
      v-click-outside.anchor="close"
    >
    <ul><li><my-table :items="items" :headers="headers"
                    single-select></my-table></li></ul>
    </div>
</div>

Css 供這個

    .dropdown_grid {
  display: inline-block;
  position: relative;
  min-width: 150px;
  width: 100%;
  color: #333333;
  cursor: pointer;
}

.dropdown_grid_container {
  width: 100%;
  position: absolute;
  margin-top: -1px;
  min-width: 500px;
  overflow-y: auto;
  background-color: #FFFFFF;
  border: 1px solid #959595;
  z-index: 200;
  max-height: 200px;
  padding: 8px 1px;
  margin-left: 2px;
}

.my-dropdown--medium {
  font-size: 14px;
  line-height: 24px;
  height: 32px

我看過多篇關於此的帖子，但無法設置它的動態寬度。 如何根據子寬度使其動態化？

Answer 1

由於您擁有元素的 class 或 ID，因此您可以使用 document.getElemnt 函數訪問寬度。 因此，您可以在打開表格或顯示表格時定義 function，然后通過文檔函數訪問表格的寬度並將其分配給您想要的任何元素。