0

I'm using grid.js to render a table in a webpage.
Having a fixed-height table expressed in vh units (60vh), with less rows than the pagination limit i got this strange effect:

gridjs-tablerow-height
A single row that stretches out to fit the <tbody>
There is a way to override the height set by display:table-row?

I tried assigning "height tags" with !important.

new gridjs.Grid({
  columns: ["Name", "Email", "Phone Number"],
  data: [
    ["John", "john@example.com", "(353) 01 222 3333"],
  ],
  height: '80vh'
}).render(document.getElementById("coolTable"));
.gridjs-tr {
    line-height: 20px !important;
    max-height: 20px !important;
}
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>

<div id="coolTable"></div>
chrias
  • 1
  • 2
  • Please show us a runnable snippet so we can see for ourselves. Read https://stackoverflow.com/help/minimal-reproducible-example for help with doing this. – A Haworth May 26 '23 at 21:27

0 Answers0