title: Table scrollbar disappearing on resize of window
body: <p>I made a table for the back-office of an e-commerce site. The table content (tbody) has a fixed height and it is scrollable through a scrollbar on the right-hand side as depicted in this picture: <a href="http://img690.imageshack.us/img690/6483/screenshot20110917at819.png" rel="nofollow">http://img690.imageshack.us/img690/6483/screenshot20110917at819.png</a></p>
  
  <p>The problem is that if I resize the browser window, this table scrollbar diseappears: <a href="http://img26.imageshack.us/img26/4919/screenshot20110917at820.png" rel="nofollow">http://img26.imageshack.us/img26/4919/screenshot20110917at820.png</a></p>
  
  <p>I know this is supposed to be normal behavior, but my customer insists to keep the table scrollbar even when resizing the window. Is there a way to implement this behavior?</p>
  
  <p>Here is the css for reference: (the table body's class is scrollContent)</p>
  
  <pre><code>/* define height and width of scrollable area. Add 16px to width for scrollbar */
  div.tableContainer {
      clear: both;
      overflow: auto;
      width: 100%; 
  }
  
  /* set table header to a fixed position. WinIE 6.x only                                           */
  /* In WinIE 6.x, any element with a position property set to relative and is a child of           */ 
  /* an element that has an overflow property set, the relative value translates into fixed.    */
  /* Ex: parent element DIV with a class of tableContainer has an overflow property set to     auto */
  thead.fixedHeader tr {
      position: relative
  }
  
  /* set THEAD element to have block level attributes. All other non-IE browsers                */
  /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
  html&gt;body thead.fixedHeader tr {
      display: block;
      width: 100%
  }
  
  /* define the table content to be scrollable                                                  */
  /* set TBODY element to have block level attributes. All other non-IE browsers            */
  /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
  /* induced side effect is that child TDs no longer accept width: auto                     */
  html&gt;body tbody.scrollContent {
      display: block;
      overflow-y: auto;
      overflow-x: hidden;
      width: 100%;
  }
  </code></pre>