Make TBODY scrollable in Webkit browsers

Question

I\'m aware of this question, but none of the answers work in Safari, Chrome, etc.

The accepted strategy (as demonstrated here) is to set the tbody height and overflo

Answer 1

A faced the same problem long ago, and I finally set out the two tables approach. This is the result: http://jsfiddle.net/bGr4V/3/, it works for all browsers (IE6+ incl).

In this jsFiddle you can play with a clean version.

My solution was to add a fix cell in thead to fill the space of the scroll bar in the tbody, then give one column a variable width (), so the header fix cell wouldn't unmatch on resizing.

HTML:

  

    

      

        

          
Column header
          
Column header
          
 
        
      
    
  

    

      
Caption
      

        

          
Data
          
Data
        
        

          
...
          
...
        
        

          
...
          
...
        
      
    
  

CSS: has * and _ hack for ie6-7, and a -webkit specific for the header fix-cell matching scroll width in each case.

.fixed_table table {
  table-layout: fixed;
  width: auto;
  border-width: 0;
  padding: 0;
  border-collapse: collapse;
}

.fixed_table .body {
  overflow: scroll;
  overflow-x: hidden;
  max-height: 10.75em;
  min-height: 2.5em;
  padding-bottom: 0.8em;
  *padding-right: 17px; /*ie7 & ie6*/
  _padding-right: 0; /*ie6*/
  _height: 10em ;
}

.fixed_table th, .fixed_table td {
  width: 4.7em;
}

.fixed_table .grow {
  width: auto;
}

.fixed_table .fix {
  width: 16px;
  *width: 17px; /*ie7 & ie6*/
  _width: 16px; /*ie6*/
}

/* webkit specific */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .fixed_table .fix{ width: 17px }
}