Member Avatar for code739

please help me on this layout
see the attached file
as you seen from the attached file in the first column there are names now i want to have this colum freese like it is static on the table.
image2

  • 2 Contributors
  • 4 Replies
  • 264 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by code739

Dani AI

Generated

As clarified, the goal is to keep the leftmost column (names) fixed while the rest of the table scrolls horizontally — like "freeze column" in a spreadsheet. was correct that a scrollable area is required, but freezing a single column needs either a modern CSS trick or a layout + small JavaScript sync. Below are two practical patterns that work reliably today.

A simple CSS-only approach uses position: sticky on the first cell and places the whole table inside an overflow container. This is the cleanest solution in modern browsers:

<div class="table-wrapper">
  <table>
    <thead> ... </thead>
    <tbody> ... </tbody>
  </table>
</div>

.table-wrapper { overflow:auto; max-width:100%; }
table { border-collapse:collapse; min-width:800px; }

th:first-child,
td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 3;
  box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}
thead th { z-index: 4; } /* header above body cells */

Notes: the scroll must be on the wrapper (not the table), set left:0 on the sticky cell, give it a solid background to hide scrolled content, and use z-index so the fixed column sits above other cells. Add top:0 to header th if a sticky header is also wanted.

If older browsers (IE) or complex interactions must be supported, split into two synchronized tables: a fixed narrow table for column 1 and a scrollable table for the others. Keep them side-by-side, sync vertical scroll and row heights with a small script:

const fixedBody = document.querySelector('.fixed .body-wrapper');
const scrollable = document.querySelector('.scrollable .table-wrapper');

scrollable.addEventListener('scroll', () => {
  fixedBody.scrollTop = scrollable.scrollTop;
});

Troubleshooting: mismatched row heights usually come from different box-sizing, padding or borders — use table-layout: fixed and explicit widths or measure/set heights via JS. If position: sticky seems ignored, confirm the wrapper is the scrolling container and that no CSS rule (e.g. unusual transforms or overflow on ancestors) is preventing it.

Recommended Answers

All 4 Replies

Member Avatar for <M/>

I am sorry... I don't get what your asking for, can you repeat the question differently (i think its just me)...

And by any chance do you have any code so we can help you much more efficiently?

Member Avatar for code739

i dont have the code now.. sorry for its not so understandable am
what i mean is.
if i have the table contains 1st column, 2nd column , 3 ..... as what the above image is.
then i want that the first column remains on its place then the next columns can be scroll to left or right..

as youve seen from my attachment there are names there that would be my first column and the other...
as youve seen from my attachment the next columns of 1 has a scroll bar below.. because i want the column to be freese like open office freeze column..

Member Avatar for <M/>

Hmmm... your question is making more sense to me (somewhat) but I don't get what you mean by freeze...

See if you can pull your code out.... I know that if you want a scrollable table you'd have to make it a big table or you'd have to put in a small box and put a scroll on it (using css).

I maybe wrong, or I didn't get your question again (sorry :( )...

I will try to find a solution (if possible)

Member Avatar for code739

i want a scrollable table but column 1 is not included as you scroll hte table it ramains in static position image3

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.