How to display scrollbars on a table

I've got a table which I want to contain scrollbars if the window gets too small. Applying the scrolling directly to the table does not seem to work in IE, so I wrapped the table in a div and applied the scrolling to that instead. The problem, though, is that in IE the scrollbars appear inside the div, covering part of the table. So even if only a horizontal scrollbar needs to be added, it also adds a vertical scrollbar because part of the vertical contents are covered by the horizontal scrollbar. This is esspecially weird when the table contains only 1 row of data because all you see is the table headings and you need to scroll to see the 1 column of data.

Is there a better way to do this? Here's some code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
  <title></title> 
  <style type="text/css"> 
.listwrapper 
{ 
  overflow: auto; 
  width: 100%; 
} 
.listtable 
{ 
  border: 1px solid #666; 
  padding: 0; 
  width: 100%; 
} 
</style> 
</head> 
<body> 
<div class="listwrapper"> 
  <table cellspacing="0" class="listtable"> 
   <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
      <th>Col 3</th> 
     </tr> 
   </thead> 
   <tbody> 
     <tr> 
      <td>Data1.1Data1.1Data1.1Data1.1</td> 
      <td>Data1.2Data1.2Data1.2Data1.2</td> 
      <td>Data1.3Data1.3Data1.3Data1.3</td> 
     </tr> 
   </tbody> 
  </table> 
</div> 
</body> 
</html>

.listwrapper { overflow:auto!important; overflow:inherit; overflow-x: auto; width: 100%; } .listtable { border: 1px solid #666; padding: 0; width: 100%; margin-bottom:0!important; margin-bottom:16px; }

How to display scrollbars on a table

Fotiman

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week