Preventing Row Height Transition When Applying CSS Styles to a Table

[cui]

Hi,

I am writing to seek advice on an issue I have encountered while using the CSS deep attribute to modify the style of a table. Upon applying the new styles, I noticed that there is a visible transition or change in the row height, which is not desirable for my project.

Code: [Select]

<style scoped>
#grid_json4 {
  height: calc(100vh - 150px);
}

:deep(.pq-grid-row > td.pq-grid-number-cell) {
  text-align: center;
}
:deep(.pq-grid-number-col) {
  text-align: center;
}

:global(.pq-grid),
:global(.pq-grid *) {
  transition: none !important;
}

:global(.pq-theme .pq-grid-footer) {
  display: flex;
  justify-content: space-around;
  margin-top: 5px;
}

:global(.pq-loading) {
  display: none !important;
}

:global(.pq-icon-col-sort) {
  margin-right: 0px;
  margin-left: 0px;
}

:global(#grid_json4) {
  border-radius: 5px;
}

:global(#grid_json4 .pq-cont-lt, .pq-cont-tr),
:global(#grid_json4 .pq-theme .ui-widget-header),
:global(#grid_json4 .pq-grid-cell, .pq-grid-row),
:global(#grid_json4 .pq-body-outer .pq-cont-left) {
  border-color: #ebeef5;
}

:global(#grid_json4 .pq-td-border-top > .pq-grid-row > .pq-grid-cell:not(.pq-focus)),
:global(#grid_json4 .pq-cont-inner > .pq-td-border-top > .pq-grid-row) {
  border-bottom-color: #ebeef5;
}

:global(#grid_json4 .pq-grid-row > .pq-grid-number-cell) {
  border-color: #ebeef5;
}

:global(#grid_json4 .pq-grid-cell > div) {
  height: 100%;
  padding: 15px 5px;
  color: #606266;
}

:global(#grid_json4 .pq-grid-row > .pq-grid-cell) {
  border-top: 0;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  border-left: 0px;
}

/* :global(#grid_json4 .pq-grid-title-row .pq-td-div),
:global(#grid_json4 .pq-grid-header-search-row .pq-td-div) {
  padding: 11px 5px;
} */

:global(#grid_json4 .pq-grid-header-search-row .pq-td-div input) {
  height: 30px;
}

:global(#grid_json4 .pq-title-span) {
  font-weight: 600;
  line-height: 30px;
  color: rgb(144, 147, 153);
}

:global(#grid_json4 .ui-button) {
  height: 32px;
  margin: 0 10px 10px 0;
  color: #fff;
  background: #4e88f3;
  border-color: #4e88f3;
  border-radius: 5px;
}

:global(#grid_json4 .pq-toolbar select) {
  height: 32px;
  margin: 0 10px 10px 0;
  color: #fff;
  background: #4e88f3;
  border-color: #4e88f3;
  border-radius: 5px;
}

:global(#grid_json4 .pq-body-outer .pq-grid-number-cell),
:global(#grid_json4 .pq-summary-outer .pq-grid-number-cell) {
  display: flex;
  align-items: center;
  justify-content: center;
}

:global(#grid_json4 .pq-summary-outer) {
  height: 1px;
  border-top: 0px solid transparent;
}

:global(#grid_json4 .pq-no-wrap > .pq-grid-row > .pq-grid-cell),
:global(#grid_json4 .pq-no-wrap > .pq-grid-row > .pq-grid-col > .pq-td-div) {
  text-align: center;
}

/* :global(.ui-button .ui-icon) {
  background-image: url('./download.svg');
} */

:global(.ui-icon.downloadIcon) {
  background: url('./download.png');
}

/* :global(.pq-toolbar .ui-button:last-of-type) {
  pointer-events: none;
} */

:global(.pq-toolbar) {
  padding: 10px 10px 0;
}

:global(#grid_json4 .pq-grid-bottom select),
:global(#grid_json4 .pq-page-current) {
  height: 30px;
}

:global(#grid_json4 .pq-grid-bottom select),
:global(#grid_json4 .pq-page-current),
:global(#grid_json4 div.pq-pager, div.pq-grid-summary) {
  color: #606266;
}Is there a way to ensure that the CSS styles are fully applied before the table is displayed on the page, thereby preventing this shift in row height from being noticeable? I would appreciate any suggestions or solutions you might have regarding this matter.

Thank you very much for your assistance.

Best regards,

cui

[cui]

I set animModel: { on: false }, but it still hasn't solved the issue.