Member Avatar for ray-solomon

Hi, this is my first post on DaniWeb.

I created this table and it works perfect in Firefox, but not in Internet Explorer.

I tried different document types, I wc3 validated it, changed the height in css for the div and for the tbody, but still not working correctly.
It must be something ridiculously simple I overlooked.

Example here

  • 4 Contributors
  • 6 Replies
  • 128 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by rexibit

Dani AI

Generated

This thread shows the classic cross-browser problem: trying to make only the table body scroll while keeping the header fixed. Browsers (especially older IE versions) treat table parts differently, so tricks like forcing tbody to be a block or setting a height on it are unreliable. and were on the right track — a wrapper with overflow is a practical building block — but a robust, cross-browser pattern is to split header and body into two matching tables.

A simple, reliable pattern (no special CSS hacks on tbody) — header table, then a fixed-height scroll wrapper containing the body table. Define column widths explicitly (via colgroup or CSS) so columns line up; if widths are dynamic, measure the header cells and copy widths into the body table.

Example HTML:

<table class="header-table">
  <colgroup>
    <col style="width:200px">
    <col style="width:150px">
    <col style="width:100px">
  </colgroup>
  <thead><tr><th>A</th><th>B</th><th>C</th></tr></thead>
</table>

<div class="scroll-wrap" style="height:300px; overflow:auto;">
  <table class="body-table">
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>
    <tbody>
      <!-- live rows here -->
    </tbody>
  </table>
</div>

Minimal CSS + JS to keep widths synced:

table { width:100%; table-layout:fixed; border-collapse:collapse; }
function syncColWidths() {
  var th = document.querySelectorAll('.header-table th');
  var cols = document.querySelectorAll('.body-table col');
  for (var i = 0; i < th.length; i++) {
    cols[i].style.width = th[i].offsetWidth + 'px';
  }
}
window.addEventListener('load', syncColWidths);
window.addEventListener('resize', syncColWidths);

Practical notes: attach your sorter to the header table and sort rows inside the body table only. If the body can show a vertical scrollbar, account for its width (it can shift the last column). For modern browsers, position: sticky on th is a simpler option. This two-table pattern keeps layout predictable across engines and avoids the fragile tbody hacks that caused the original IE breakage.

Recommended Answers

All 6 Replies

Member Avatar for buddylee17

IE is retarded. Here's what I've found regarding the scrollable tbody element.

Member Avatar for MidiMagic

The tbody element is designed to scroll when the table is larger than the browser window, not a container.

Member Avatar for ray-solomon

Well, I decided to not use this type of table anymore because it must be deemed outdated if the modern browsers are not supporting it enough.
I don't feel comfortable using any code that takes too many browser workarounds to work correctly.

All I was doing was trying to was make a scrolling table first so I can use javascript to sort the columns.
All of the sort-table javascripts out there use this type of table to work correctly.
Unfortunately, all of them did not work in most modern browsers. And the only one that did, I could not modify it without breaking something.

Thanks for the input.

I don't know how to close this thread, so I suppose it will always be open.
Closing it as solved will just make it appear there was a solution to the problem was when there is not. Maybe the admin/developers should know about this so it does not confuse other readers.

Member Avatar for buddylee17

What about something like ?

Member Avatar for ray-solomon

That is nice. $495 sounds reasonable for the amount of work put into making it a nice product.

I would have to think about it.

Thanks.

Member Avatar for rexibit

Another option for using the a scrollable area is CSS' overflow property. It would allow you to also get a number of cross-browser compatibility too.

<style type="text/css">
<!--
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
-->
</style>
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.