Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
77
rated 0 times [  84] [ 7]  / answers: 1 / hits: 32818  / 15 Years ago, mon, april 13, 2009, 12:00:00

I have a table which has a header row, but also a header column and a total column with several columns in between.



Something like this:



Name    Score 1    Score 2  ...  Total
--------------------------------------
John 5 6 86
Will 3 7 82
Nick 7 1 74


The entire table is defined inside a fixed-width scrollable div because there are likely to be a large number of Score rows and I have a fixed-width page layout.



<div id=tableWrapper style=overflow-x: auto; width: 500px;>
<table id=scoreTable>
...
</table>
</div>


What I would like is for the first (Name) and last (Total) columns to remain visible while the inner columns scroll.



Can anyone help me with this?



Edit: I mean horizontal scrolling only - changed to specify that.






Update: I've solved this problem for myself and have posted the answer below. Let me know if you need any more information - this was a bit of a pain to do and I'd hate for someone else to have to rewrite everything.


More From » html

 Answers
2

I've experimented with a few methods (thanks to everyone who helped) and here's what I've come up with using jQuery. It seems to work well in all browsers I tested. Feel free to take it and use it however you wish. Next step for me will be turning it into a reusable jQuery plugin.



Summary:



I started with a normal table with everything in it (Id=ladderTable), and I wrote Three methods - one to strip the first column, one to strip the last column, and one to fix the row heights.



The stripFirstColumn method creates a new table (Id=nameTable), traverses the original table and takes out the first column, and adds those cells to the nameTable.



The stripLastColumn method does basically the same thing, except it takes out the last column and adds the cells to a new table called totalTable.



The fixHeights method looks at each row in each table, calculates the maximum height, and applies it to the related tables.



In the document ready event, I called all three methods in order. Note that all three tables float left so they'll just stack horizontally.



The HTML Structure:



<h1>Current Ladder</h1> 
<div id=nameTableSpan style=float:left;width:100px;border-right:2px solid gray;></div>
<div id=ladderDiv style=float:left;width:423px;overflow:auto;border:1px solid gray;margin-top:-1px;>
<table id=ladderTable class=ladderTable>
<thead>
<tr><td>Name</td><td>Round 1</td> ... <td>Round 50</td><td class=scoreTotal>Total</td></tr>
</thead>
<tr><td>Bob</td><td>11</td> ... <td>75</td><td>421</td></tr>
... (more scores)
</table>
</div>
<div id=totalTableSpan style=float:left;width:70px;border-left:2px solid gray;></div>


The jQuery:



function stripFirstColumn() {                
// pull out first column:
var nt = $('<table id=nameTable cellpadding=3 cellspacing=0 style=width:100px;></table>');
$('#ladderTable tr').each(function(i)
{
nt.append('<tr><td style=color:'+$(this).children('td:first').css('color')+'>'+$(this).children('td:first').html()+'</td></tr>');
});
nt.appendTo('#nameTableSpan');
// remove original first column
$('#ladderTable tr').each(function(i)
{
$(this).children('td:first').remove();
});
$('#nameTable td:first').css('background-color','#8DB4B7');
}

function stripLastColumn() {
// pull out last column:
var nt = $('<table id=totalTable cellpadding=3 cellspacing=0 style=width:70px;></table>');
$('#ladderTable tr').each(function(i)
{
nt.append('<tr><td style=color:'+$(this).children('td:last').css('color')+'>'+$(this).children('td:last').html()+'</td></tr>');
});
nt.appendTo('#totalTableSpan');
// remove original last column
$('#ladderTable tr').each(function(i)
{
$(this).children('td:last').remove();
});
$('#totalTable td:first').css('background-color','#8DB4B7');
}

function fixHeights() {
// change heights:
var curRow = 1;
$('#ladderTable tr').each(function(i){
// get heights
var c1 = $('#nameTable tr:nth-child('+curRow+')').height(); // column 1
var c2 = $(this).height(); // column 2
var c3 = $('#totalTable tr:nth-child('+curRow+')').height(); // column 3
var maxHeight = Math.max(c1, Math.max(c2, c3));

//$('#log').append('Row '+curRow+' c1=' + c1 +' c2=' + c2 +' c3=' + c3 +' max height = '+maxHeight+'<br/>');

// set heights
//$('#nameTable tr:nth-child('+curRow+')').height(maxHeight);
$('#nameTable tr:nth-child('+curRow+') td:first').height(maxHeight);
//$('#log').append('NameTable: '+$('#nameTable tr:nth-child('+curRow+')').height()+'<br/>');
//$(this).height(maxHeight);
$(this).children('td:first').height(maxHeight);
//$('#log').append('MainTable: '+$(this).height()+'<br/>');
//$('#totalTable tr:nth-child('+curRow+')').height(maxHeight);
$('#totalTable tr:nth-child('+curRow+') td:first').height(maxHeight);
//$('#log').append('TotalTable: '+$('#totalTable tr:nth-child('+curRow+')').height()+'<br/>');

curRow++;
});

if ($.browser.msie)
$('#ladderDiv').height($('#ladderDiv').height()+18);
}

$(document).ready(function() {
stripFirstColumn();
stripLastColumn();
fixHeights();
$(#ladderDiv).attr('scrollLeft', $(#ladderDiv).attr('scrollWidth')); // scroll to the last round
});


If you have any questions or if there's anything that wasn't clear, I'm more than happy to help.



It took me quite a while to work out that there was nothing that I could really reuse and it took a bit longer to write this. I'd hate for someone to go to the same trouble.


[#99713] Monday, April 6, 2009, 16 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dexter

Total Points: 717
Total Questions: 98
Total Answers: 115

Location: Sudan
Member since Thu, May 7, 2020
4 Years ago
;