Scrolling Tables

Hi,

       This week I am presenting a tip that helps you to design sleek web pages.Before discussion of the tip let me explain the problem.Usually in projects we will show the report as a result of the user action that generates a too long table.This table will makes you to scroll whole web page which not a intuitive to look and effects the beauty of the web page.

        There are a couple solution to this problem one the manage Pagination i.e., dividing the all the result into some reasonable parts and displaying a limited part and for renaming we have to provide navigation buttons or links. Implementation of this Pagination is tough (Of course,we will discuss about it in latter weeks ). 

        Another Solution to this problem simply making the body part of the table to be Scrollable.The ideal thing to do is to scroll the body of the table while leaving the headings fixed. It is possible to have a table with a scrolling body and fixed header with only HTML and CSS.

        CSS overflow property for creating scrollable regions in your document. This property is currently only supported on DIV and SPAN elements that have a width or height defined if the content that we are going to present is over the specified width and height browser will automatically forces the DIV or SPAN to scroll and forcing a table to scroll. Therefore, creating a scrollable table is more an art that requires careful manipulation of HTML and CSS.

Scrolling Table Example
Head1	Head 2	Head 3	Head 4

R1 C1	R1 C2	R1 C3	R1 C4
R2 C1	R2 C2	R2 C3	R2 C4
R3 C1	R3 C2	R3 C3	R3 C4
R4 C1	R4 C2	R4 C3	R4 C4
R5 C1	R5 C2	R5 C3	R5 C4
R6 C1	R6 C2	R6 C3	R6 C4
R7 C1	R7 C2	R7 C3	R7 C4
R8 C1	R9 C2	R9 C3	R9 C4
R1 C1	R1 C2	R1 C3	R1 C4
R2 C1	R2 C2	R2 C3	R2 C4
R1 C1	R1 C2	R1 C3	R1 C4
R2 C1	R2 C2	R2 C3	R2 C4
R1 C1	R1 C2	R1 C3	R1 C4
R2 C1	R2 C2	R2 C3	R2 C4
R1 C1	R1 C2	R1 C3	R1 C4
R2 C1	R2 C2	R2 C3	R2 C4

          The contents in the table above are scrollable. The header row stays static above the scrollbars.this table is actually composed of two tables - one for the header row and a second for the actual contents.To clean-up the appearance, we added a border to the bottom and left side of the DIV.

Source Code

       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr>
            <th>col 1 heading</th>
            <th>col 2 heading</th>
         </tr>
       </table>
       <div style="width:325px; height:200px; overflow:auto;">
         <table cellspacing="0" cellpadding="1" border="1" width="300" >
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
           </tr>
            <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
           </tr>
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
           </tr>
         </table>  
       </div>

This code will makes the following output:

col 1 heading	col 2 heading

col 1 data 1	col 2 data 1
col 1 data 1	col 2 data 1
col 1 data 2	col 2 data 2
col 1 data 3	col 2 data 3
col 1 data 2	col 2 data 2
col 1 data 3	col 2 data 3
col 1 data 1	col 2 data 1
col 1 data 2	col 2 data 2
col 1 data 3	col 2 data 3
col 1 data 1	col 2 data 1
col 1 data 2	col 2 data 2
col 1 data 3	col 2 data 3

There are four values to this property
Value Description
visible       The overflow is not clipped. It renders outside the element's box
hidden      The overflow is clipped, and the rest of the content will be invisible
scroll        The overflow is clipped, but a scroll-bar is added to see the rest of the content
auto          If overflow is clipped, a scroll-bar should be added to see the rest of the content

Some Examples from my implementations.. 


Displaying Search Result with Vertical Scroll Bar

Showing the thumbnails of the images with Horizontal Scroll Bar..

Okay guys,
This is up-to this week..I have collect the information from various websites and specified on only some examples which are solutions to problems in some non-functional requirements.. Let us meet next week with another tip and trick..

Thank Q,

bye bye

My Best Wishes
Happy Sankranti....!

regards,
M.Agni
Assistant Professor
ACE Team member
Aditya Edu. Group.