Advertisement

11.19.2007 at 08:52AM PST, ID: 22970564
[x]
Attachment Details

Fixed header row

Asked by tgatif in Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), Programming for ASP.NET

Tags: header, fixed

I need to display a large amount of data with a fixed header row. The table needs to scroll vertically and horizontally. Basically, it should behave like this example: http://home.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

I've used the same method as the code in the example, however, what the example lacks is variable width columns. As soon as I set a column width to 50px (for example), the header row stops scrolling horizontally with the data and overflows past the table on the right.

I've looked at several other methods and they're all missing horizontal scrolling or variable width columns.

See the code below, I've stripped the data from the table so when testing, add several more rows to get it to scroll vertically. Any help would be greatly appreciated. ThanksStart Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:

Here is my stylesheet:
div.grid-container
{
	overflow: auto;
}
 
.grid
{
	table-layout: fixed;
	border-collapse: collapse;
	background-color: #FFFFCC;
}
 
div.grid-container table tr.grid-header td,div.grid-container table tr.grid-header th
{
	overflow:hidden;
}
 
tr.grid-header th, tr.grid-header th.locked, tr.grid-header td, tr.grid-header td.locked, thead th, thead th.locked
{
	position: relative;
}
	
tr.grid-header th, tr.grid-header td, thead th 
{
	top: expression(document.getElementById("grid-container").scrollTop-2); /*IE5+ only*/
	z-index: 190;
}
 
tr.grid-header th.locked, tr.header td.locked, thead th.locked
{
	z-index: 30;
}
 
td.locked,  th.locked
{
	font-weight: bold;
	border-right: 1px solid black;
	left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /*IE5+ only*/
	position: relative;
	z-index: 10;
}
 
 
 
relevant html:
 
        <div id="grid-container" class="grid-container" style="width:98%; height:400px">
            <table class="grid" cellspacing="0" rules="all" border="1" id="grdOrders" style="border-collapse:collapse;">
	<tr class="grid-header">
		<th scope="col" style="width:80px;"><input name="grdOrders$ctl01$txtOrderNo             " type="text" id="grdOrders_ctl01_txtOrderNo             " style="width:80px;" /><span><br />Order                         </span></th>
		<th scope="col" style="width:20px;"><input name="grdOrders$ctl01$txtOrderTy             " type="text" value="SO" id="grdOrders_ctl01_txtOrderTy             " style="width:20px;" /><span><br />Type                          </span></th>
		<th scope="col" style="width:20px;"><input name="grdOrders$ctl01$txtHoldCode            " type="text" id="grdOrders_ctl01_txtHoldCode            " style="width:20px;" /><span><br />Hold                          </span></th>
		<th scope="col" style="width:80px;"><input name="grdOrders$ctl01$txtSoldToNo            " type="text" id="grdOrders_ctl01_txtSoldToNo            " style="width:80px;" /><span><br />Sold To                       </span></th>
		<th scope="col" style="width:300px;"><input name="grdOrders$ctl01$txtSoldToDesc          " type="text" id="grdOrders_ctl01_txtSoldToDesc          " style="width:300px;" /><span><br />Name                          </span></th>
		<th scope="col" style="width:200px;"><select name="grdOrders$ctl01$lstDateRequested       " id="grdOrders_ctl01_lstDateRequested       " style="width:200px;"></select><span><br />Reqd Date                     </span></th>
		<th scope="col" style="width:200px;"><select name="grdOrders$ctl01$lstDateTransaction     " id="grdOrders_ctl01_lstDateTransaction     " style="width:200px;"></select><span><br />Trans Date                    </span></th>
		<th scope="col" style="width:250px;"><select name="grdOrders$ctl01$lstItem                " id="grdOrders_ctl01_lstItem                " style="width:250px;"></select><span><br />Item                          </span></th>
		<th scope="col" style="width:200px;"><select name="grdOrders$ctl01$lstLotNo               " id="grdOrders_ctl01_lstLotNo               " style="width:200px;"></select><span><br />Lot Number                    </span></th>
		<th scope="col" style="width:120px;"><select name="grdOrders$ctl01$lstBranch              " id="grdOrders_ctl01_lstBranch              " style="width:120px;"></select><span><br />Branch                        </span></th>
	</tr>
	<tr>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;">SO</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;"></span></td>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:300px;"><span style="display:inline-block;width:300px;">My Customer</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;">01/01/06</span></td>
		<td style="width:250px;"><span style="display:inline-block;width:250px;">asdfasdfasdf</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:120px;"><span style="display:inline-block;width:120px;">1234</span></td>
	</tr>
	<tr>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;">SO</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;"></span></td>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:300px;"><span style="display:inline-block;width:300px;">My Customer</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;">01/01/06</span></td>
		<td style="width:250px;"><span style="display:inline-block;width:250px;">asdfasdfasdf</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:120px;"><span style="display:inline-block;width:120px;">1234</span></td>
	</tr>
	<tr>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;">SO</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;"></span></td>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:300px;"><span style="display:inline-block;width:300px;">My Customer</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;">01/01/06</span></td>
		<td style="width:250px;"><span style="display:inline-block;width:250px;">asdfasdfasdf</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:120px;"><span style="display:inline-block;width:120px;">1234</span></td>
	</tr>
	<tr>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;">SO</span></td>
		<td style="width:20px;"><span style="display:inline-block;width:20px;"></span></td>
		<td style="width:80px;"><span style="display:inline-block;width:80px;">1234</span></td>
		<td style="width:300px;"><span style="display:inline-block;width:300px;">My Customer</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;">01/01/06</span></td>
		<td style="width:250px;"><span style="display:inline-block;width:250px;">asdfasdfasdf</span></td>
		<td style="width:200px;"><span style="display:inline-block;width:200px;"></span></td>
		<td style="width:120px;"><span style="display:inline-block;width:120px;">1234</span></td>
	</tr>
</table></div>
[+][-]11.19.2007 at 10:10AM PST, ID: 20314102

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]11.19.2007 at 10:10AM PST, ID: 20314107

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]11.19.2007 at 10:31AM PST, ID: 20314251

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 7-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]11.21.2007 at 08:12AM PST, ID: 20328738

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), Programming for ASP.NET
Tags: header, fixed
Sign Up Now!
Solution Provided By: tgatif
Participating Experts: 2
Solution Grade: A
 
 
[+][-]05.22.2008 at 05:19AM PDT, ID: 21623041

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628