SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How two fix first two column of a html scrolling table?

    Dear All

    Please see the script below. This is a scrolling table. First row & last row are fixed, they don't moved. I also want to fixed the first two column (column1 & column2). Please help me.


    /* CSS Document */


    table#table-body, table#table-header, table#table-footer
    {
    border-spacing:0;
    border-collapse:collapse;
    border:1px solid;
    table-layout:fixed;
    width:1000px;
    border:1px solid #000;
    }

    table#table-header th
    {
    background:#c2a1a1;
    }

    table#table-footer td
    {
    background:#a39393;
    }

    table#table-body td
    {
    background:#e1d9d9;
    }

    table#table-body td, table#table-header th, table#table-footer td
    {
    border:1px solid #000;
    width:100px;
    height:30px;
    overflow:hidden;
    white-space:nowrap;
    }

    div#header-container, div#footer-container
    {
    overflow:hidden;
    }

    div#scroll
    {
    width:500px;
    overflow:hidden;
    max-height:150px;
    padding-left:1px;
    }

    div#fake-scroll-container
    {
    width:500px;
    overflow:hidden;
    position:relative;
    }

    div#y-fake-scroll
    {
    overflow-y:scroll;
    overflow-x:hidden;
    background:transparent;
    position:absolute;
    right:0;
    position:absolute;
    max-height:149px;
    top:31px;
    }

    div#x-fake-scroll
    {
    height:40px;
    margin-top:-23px;
    overflow-x:auto;
    overflow-y:hidden;
    margin-top:expression('0px');/* IE 7 fix*/
    height:expression('17px'); /* IE 7 fix*/
    }

    div#y-scroll
    {
    max-height:150px;
    overflow-y:auto;
    overflow-x:hidden;
    overflow:scroll;
    width:1010px;
    padding:0px 1px 1px 1px;
    }

    div#header-container
    {
    padding:1px 1px 0 1px;
    }

    div#footer-container
    {
    padding:0 1px;
    }



    // JavaScript Document

    var YtableEmulator = document.getElementById('y-table-emulator');
    var XtableEmulator = document.getElementById('x-table-emulator');
    var table = document.getElementById('table-body');

    YtableEmulator.style.height = table.clientHeight == 0 ? "330px" : table.clientHeight + "px";
    XtableEmulator.style.width = table.clientWidth + "px";

    var scrollablePanel = document.getElementById('scroll');
    var headerContainer = document.getElementById('header-container');
    var footerContainer = document.getElementById('footer-container');
    var YfakeScrollablePanel = document.getElementById('y-fake-scroll');
    var XfakeScrollablePanel = document.getElementById('x-fake-scroll');


    YfakeScrollablePanel.style.top = headerContainer.clientHeight == 0 ? "34px" : headerContainer.clientHeight + "px";
    scrollablePanel.onscroll = function (e) {
    XfakeScrollablePanel.scrollTop = scrollablePanel.scrollTop;
    }
    YfakeScrollablePanel.onscroll = function (e) {
    scrollablePanel.scrollTop = YfakeScrollablePanel.scrollTop;
    }
    XfakeScrollablePanel.onscroll = function (e) {
    scrollablePanel.scrollLeft = XfakeScrollablePanel.scrollLeft;
    headerContainer.scrollLeft = XfakeScrollablePanel.scrollLeft;
    footerContainer.scrollLeft = XfakeScrollablePanel.scrollLeft;
    }

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Scrollable HTML Table with fixed header for IE 7, IE 8, Firefox 3.5, Chrome</title>
    <link type="text/css" rel="stylesheet"  href="style.css"></link>
    </head>
    <body>
    
    
    <div id="fake-scroll-container">
    
    <div id="header-container">
    <table id="table-header" cellpadding="0" cellspacing="0">
    	<tr>
    		<th>Column 1</th>
    		<th>Column 2</th>
    		<th>Column 3</th>
    		<th>Column 4</th>
    		<th>Column 5</th>
    		<th>Column 6</th>
    		<th>Column 7</th>
    		<th>Column 8</th>
    		<th>Column 9</th>
    		<th>Column 10</th>
    	</tr>
    </table>
    </div>
    
    <div id="scroll">
    <table id="table-body" cellpadding="0" cellspacing="0">
    	<tr>
    		<td>Cell 1.1</td>
    		<td>Cell 1.2</td>
    		<td>Cell 1.3</td>
    		<td>Cell 1.4</td>
    		<td>Cell 1.5</td>
    		<td>Cell 1.6</td>
    		<td>Cell 1.7</td>
    		<td>Cell 1.8</td>
    		<td>Cell 1.9</td>
    		<td>Cell 1.10</td>		
    	</tr>
    	<tr>
    		<td>Cell 2.1</td>
    		<td>Cell 2.2</td>
    		<td>Cell 2.3</td>
    		<td>Cell 2.4</td>
    		<td>Cell 2.5</td>
    		<td>Cell 2.6</td>
    		<td>Cell 2.7</td>
    		<td>Cell 2.8</td>
    		<td>Cell 2.9</td>
    		<td>Cell 2.10</td>		
    	</tr>	
    	<tr>
    		<td>Cell 3.1</td>
    		<td>Cell 3.2</td>
    		<td>Cell 3.3</td>
    		<td>Cell 3.4</td>
    		<td>Cell 3.5</td>
    		<td>Cell 3.6</td>
    		<td>Cell 3.7</td>
    		<td>Cell 3.8</td>
    		<td>Cell 3.9</td>
    		<td>Cell 3.10</td>		
    	</tr>	
    	<tr>
    		<td>Cell 4.1</td>
    		<td>Cell 4.2</td>
    		<td>Cell 4.3</td>
    		<td>Cell 4.4</td>
    		<td>Cell 4.5</td>
    		<td>Cell 4.6</td>
    		<td>Cell 4.7</td>
    		<td>Cell 4.8</td>
    		<td>Cell 4.9</td>
    		<td>Cell 4.10</td>		
    	</tr>
    	<tr>
    		<td>Cell 5.1</td>
    		<td>Cell 5.2</td>
    		<td>Cell 5.3</td>
    		<td>Cell 5.4</td>
    		<td>Cell 5.5</td>
    		<td>Cell 5.6</td>
    		<td>Cell 5.7</td>
    		<td>Cell 5.8</td>
    		<td>Cell 5.9</td>
    		<td>Cell 5.10</td>		
    	</tr>
    	<tr>
    		<td>Cell 6.1</td>
    		<td>Cell 6.2</td>
    		<td>Cell 6.3</td>
    		<td>Cell 6.4</td>
    		<td>Cell 6.5</td>
    		<td>Cell 6.6</td>
    		<td>Cell 6.7</td>
    		<td>Cell 6.8</td>
    		<td>Cell 6.9</td>
    		<td>Cell 6.10</td>		
    	</tr>
    	<tr>
    		<td>Cell 7.1</td>
    		<td>Cell 7.2</td>
    		<td>Cell 7.3</td>
    		<td>Cell 7.4</td>
    		<td>Cell 7.5</td>
    		<td>Cell 7.6</td>
    		<td>Cell 7.7</td>
    		<td>Cell 7.8</td>
    		<td>Cell 7.9</td>
    		<td>Cell 7.10</td>		
    	</tr>
    	<tr>
    		<td>Cell 8.1</td>
    		<td>Cell 8.2</td>
    		<td>Cell 8.3</td>
    		<td>Cell 8.4</td>
    		<td>Cell 8.5</td>
    		<td>Cell 8.6</td>
    		<td>Cell 8.7</td>
    		<td>Cell 8.8</td>
    		<td>Cell 8.9</td>
    		<td>Cell 8.10</td>		
    	</tr>
    </table>	
    </div>
    
    <div id="footer-container">
    <table id="table-footer" cellpadding="0" cellspacing="0">
    	<tr>
    		<td>Summary 1</td>
    		<td>Summary 2</td>
    		<td>Summary 3</td>
    		<td>Summary 4</td>
    		<td>Summary 5</td>
    		<td>Summary 6</td>
    		<td>Summary 7</td>
    		<td>Summary 8</td>
    		<td>Summary 9</td>
    		<td>Summary 10</td>
    	</tr>
    </table>
    </div>
    
    <div id="y-fake-scroll">
    <div id="y-table-emulator" style="width:40px;">
    &nbsp;
    </div>
    </div>
    
    <div id="x-fake-scroll">
    <div id="x-table-emulator">
    &nbsp;
    </div>
    </div>
    
    <script type="text/javascript" src="script.js">
    </script>
    </div>
    
    
    </body>
    </html>
    

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Everyone!!!

    Please help me.

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm - I've never seen this done the way you're asking to do it here...I would recommend doing it with separate divs/tables with your content table inside div with the overflow set to scroll. You could do this with position:fixed too, but that brings up another set of issues...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •