Home/ Questions/Q 1014849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T10:18:45+00:00

I’m creating a JavaScript-driven timetable overview screen. It shows times of day as rows

  • 0

I’m creating a JavaScript-driven timetable overview screen. It shows times of day as rows doing down the left, and has the days as columns going across the top.

There’s an example here: http://www.cap2.co.uk/dev/timetable.htm

Essentially, I’d like to put the days across the top of the timetable div, and have them fixed there as the element scrolls.

I realise that I could just place the days before the div. However, because the layout is intended to be fluid, I’m potentially going to have issues with the headings lining up with the grid below due to the varying scrollbar width across the browsers (and user preference).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’ll have to be outside of / before div#timetable.

    Wrap div#timetable in another <div>. Give the outer <div> the position:relative; and the inner <div> (div#timetable) the overflow:scroll;.

    Here’s a working example: (a little long winded)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Example</title> 
  <style>
    #main {
      padding-top:20px;
      position:relative;
      top:0px;
      left:0px;
    }
    #main .scrollable {
      height:50px;
      overflow-y:scroll;
    }
    #main h2 {
      position:absolute;
      top:0px;
      left:0px;
      background:red;
      width:100%;
      z-index:-1;
    }
  </style>
</head>
<body>
  <h1>This is the example</h1>
  <div id="main">
    <h2>This text shouldn't move.</h2>
    <!-- this is where you want div#timetable -->
    <div class="scrollable">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta mi vel libero bibendum dapibus. Fusce enim lacus, egestas id malesuada et, mollis eu dolor. Integer pellentesque pulvinar dolor, quis lacinia elit tempus vel. Integer volutpat nisl nec nisi egestas a scelerisque libero convallis. Ut interdum, tellus sit amet cursus tristique, metus ligula vestibulum enim, tempus scelerisque dui urna id risus. Duis tempor, sem vel dignissim adipiscing, tellus erat sodales justo, a sodales nulla nibh ac arcu. Vivamus ut lacinia erat. Mauris quis condimentum velit. Morbi mauris nisl, bibendum a tincidunt egestas, convallis id arcu. Fusce purus orci, porttitor vel elementum eu, sagittis quis lacus. Praesent sed commodo turpis. Etiam vitae viverra sem. Nam condimentum massa vitae sapien adipiscing viverra. Proin feugiat mi a quam molestie sed sodales tortor vulputate. Mauris ultrices rhoncus lorem vel imperdiet.</p>
      <p>Fusce pretium, massa ac fermentum laoreet, erat justo dignissim justo, et auctor massa tellus quis eros. Aenean ut mauris eget tortor porta egestas ut sed eros. Duis dignissim viverra orci dictum blandit. Quisque eleifend, arcu vitae tristique dignissim, tortor turpis cursus nunc, eget accumsan velit tortor vel leo. Sed nisl quam, consectetur vel rhoncus eu, rhoncus non tortor. Mauris nec rutrum diam. Sed sit amet augue est, eu dapibus orci. Nulla vel turpis magna, eu euismod est. Nulla interdum urna a lectus commodo in blandit erat fermentum. Duis sit amet commodo libero. Aliquam porttitor nulla ultrices sem dapibus fringilla.</p>
      <p>Fusce faucibus egestas mi vel mollis. Donec at accumsan massa. Nullam vitae massa a dui facilisis dictum nec at quam. Quisque pharetra malesuada est id pulvinar. Suspendisse ut nunc enim. Donec tristique consectetur tempor. Vestibulum vitae imperdiet massa. Ut a lacus et ante molestie adipiscing. Ut cursus dapibus blandit. Cras ac varius orci. Duis aliquet lacinia turpis a tincidunt. Aenean sed elit urna, sagittis volutpat massa. Quisque iaculis neque sit amet ipsum aliquam non auctor lacus gravida. Donec vitae leo eget tellus lobortis dictum ac eget erat. Integer eget eleifend metus. Fusce accumsan cursus accumsan. In hac habitasse platea dictumst. Nullam egestas odio nec quam ornare vitae ultricies mi consectetur.</p>
      <p>Duis ante eros, aliquam a euismod quis, porta ac augue. Sed lobortis, nulla eleifend adipiscing fringilla, ligula arcu tincidunt nisi, eget tincidunt elit nunc quis felis. Phasellus condimentum adipiscing risus non pellentesque. Morbi ornare viverra nulla in pulvinar. Integer vestibulum dui eget neque euismod pretium. Nullam dapibus cursus vehicula. Duis blandit neque sed diam porttitor a feugiat libero suscipit. Donec odio tortor, pellentesque at tempus ut, faucibus ut augue. In elementum volutpat ante, eu mollis orci iaculis sit amet. Nam ornare sagittis egestas. Fusce sit amet consequat dolor. Nullam feugiat arcu enim, rhoncus dictum sem. Aliquam erat volutpat. Nam venenatis tortor eu nisl semper ullamcorper eu eget lectus. Phasellus rhoncus est sit amet est ultricies ut ultricies tellus condimentum. Fusce posuere mi sed sapien molestie ullamcorper. Vivamus ac convallis purus. Suspendisse eleifend orci nec nibh sagittis consectetur. In sem elit, sagittis semper volutpat et, suscipit facilisis leo. Nulla facilisi.</p>
      <p>Donec adipiscing, nisl vitae ornare ultricies, justo elit mattis est, ac vehicula nibh sem sed arcu. Nulla in purus vel risus ultricies consequat tempus a orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla sodales justo eu elementum. Aenean eget velit sem, quis pretium sem. Quisque luctus leo quis est rhoncus congue. Praesent tincidunt, elit eget imperdiet condimentum, justo elit accumsan ante, eget vestibulum turpis mi vitae diam. In porttitor bibendum arcu, ac sodales elit congue sed. Nulla facilisi. Ut turpis libero, venenatis sit amet tincidunt et, laoreet vel libero. Praesent eleifend porttitor imperdiet. Quisque et condimentum nisl. Etiam rhoncus suscipit ante, sit amet imperdiet tellus aliquet vel. Etiam ante neque, lobortis vitae consectetur in, cursus quis velit. Ut quis justo eu nisl ultricies vulputate nec ac lorem. </p>
    </div>
  </div>
</body>
</html>
    • 0