Member Avatar for anoopkh

Hi
Sorry for my bad english.

I am using a <tbody> section and I had set height of Tbody .But When the number of rows are small the height of the row will increase.

I have tried to use max-height instead of height. But it doesn't works. I am using Mozilla Firefox.

Can anyone give a solution for this.

  • 2 Contributors
  • 2 Replies
  • 122 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by anoopkh

Dani AI

Generated

Brief diagnosis: when you give a table-row-group (tbody) a fixed height the table layout algorithm will distribute that vertical space across the rows, so with only a few rows each row ends up taller than you expect. The tbody element is not a normal block and behaves differently across engines — see the spec/notes on the element and CSS display behavior for background: tbody element and display values.

Practical fixes (prefer CSS over JS):

  • Simple scroll container (keeps natural row heights):

    <div class="table-wrap" style="max-height:280px; overflow:auto;">
<table>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
</div>

    This scrolls the whole table. Header will scroll too.

  • Fixed header, scrollable body using CSS position: sticky:

    .table-wrap { max-height:280px; overflow:auto; }
table { width:100%; border-collapse:collapse; table-layout:fixed; }
thead th { position:sticky; top:0; background:#fff; z-index:2; }

    position: sticky is widely supported and avoids JS. Add a background on the header cells to prevent bleed-through.

  • If you must separate header/body into two elements (two-table approach) make column widths explicit (use colgroup or table-layout: fixed and set column widths) so the header and body columns line up.

If a fixed per-row height is required, set that on td/tr (or control with line-height and padding). was right to suggest explicit row heights as an option, and ’s JS fallback is fine when dynamic adjustments are needed — but prefer the CSS patterns above for simpler, cross-browser behavior. For table layout details and the table-layout property see table-layout on MDN.

Recommended Answers

All 2 Replies

Member Avatar for Agarsia

you tried to set heights to the rows? and you shouldnt use max-height for the tbody, cause you need min-height in the problem you have

Member Avatar for anoopkh

Hello
Thanks for the replies.

I solved it by adding the following javascript

<script>
var tbody=document.getElementById('collection_body');
if(tbody.scrollHeight<=280) tbody.style.height="auto";
</script>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.