Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add scrollbar to table

Tags:

html

css

I want to add a vertical and horizontal scroll bar to the table with fixed header. By using thead and tbody tags I could add scrollbar in firefox but IE does not support the overflow:auto property in tbody. IE8 does not support css expressions so can you tell me how to accomplish this?

like image 605
Shruti Avatar asked Aug 24 '09 07:08

Shruti


People also ask

How do I add a scrollbar to my table?

Suppose we want to add a scroll bar option in HTML, use an “overflow” option and set it as auto-enabled for adding both horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.

How do I add a horizontal scrollbar to a table?

Basic Horizontal Scroll Box To make a scroll box with a horizontal scroll, you need to use the overflow-x property. Specifically, you need to use this code: overflow-x:scroll; . This tells your browser to create scroll bars on the x (horizontal) axis, whenever the contents of the container is too wide.


2 Answers

with CSS it should be easy

div.scrollWrapper{

  height:250px;
  width:200px;
  overflow:scroll;
}


<div class="scrollWrapper">
<table >
<tbody height="xxx">
<tr>......

</tbody>
</table>
</div>
like image 81
Abhijit Gaikwad Avatar answered Oct 05 '22 19:10

Abhijit Gaikwad


On giving fixed height also that is not working in IE. The height is getting applied to tr which I gave to tbody.

like image 32
Shruti Avatar answered Oct 05 '22 17:10

Shruti