Question

我们需要在窗口中显示一个可能需要X和/或Y溢出的数据表。当我们没有足够的数据来使用整个屏幕时，我们需要查看空白区域，因为设置另一种颜色看起来并不好看。但是当激活溢出时，表应该以最后一个单元结束。但是，如附图所示，仍然可以看到一个空间。 End of the table

表的结构：

<div :id="getIdHTML('-search-list')" class="search-list">
    <data-table>
        <data-table-row :id="getIdHTML('-header-row')" class="header-row" :data="columns">
           <data-table-cell class="header-cell" v-for="(column, index) in columns" :key="index" :data="column">
               <p>{{ $t(column) }}</p>
           </data-table-cell>
        </data-table-row>
    </data-table>
    <data-table class="content-rows">
       <data-table-row class="content-row" v-for="(row, rowIndex) in rows" :key="rowIndex" :data="row.values" v-on:dblclick.native="openTabNotice(row)">
          <data-table-cell class="content-cell" v-for="(cell, cellIndex) in row.values" :key="cellIndex" :data="cell">
             <component v-model="cell.value" :is="cell.type" :fieldPrototype="cell.field" :maskType="'grid'" :inputMod="false" :entity="mask.entityTarget"
           :language="language" />
          </data-table-cell>
       </data-table-row>
    </data-table>
</div>

样式表：

.search-list {
  position:relative;
  width: 100%;
  height: calc(~'100% - 112px');
  overflow-x: auto;
  overflow-y: auto;
}

.header-row {
  position: absolute;
  z-index: 1;
  background: gray;
}

.content-rows {
   margin-top: 30px;
}

.header-cell {
  height: 30px;
  font-weight: bold;
  color: white;
  border-right: solid 1px lightgray;
}

.content-cell {
  min-height:30px;
}

.content-row:hover {
  background: @colorMouseHover
}

.header-cell p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

我尝试将边距设置为0，填充为0，将高度更改为 max-height ，设置负边距，但我似乎可以摆脱这个白色空间。它似乎是div的一部分（在查看资源管理器时附加到.search-list）。

如何删除表下的空白区域

0 个答案: