Scrolling Table

Shawn B. · May 14, 2004

Greetings,

I am trying to create a table that has a scrolling body. The problem I'm
experiencing is that if the columns in the "body" part of the table exceed
the width of the "header" then they columns lose their alignment. Can
anyone help me correct this?

<div style="WIDTH:500px; HEIGHT:100px">
<table id="tblHeader" border="0" cellpadding="0" cellspacing="0"
width="100%" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px
solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid">
<tr bgcolor="gainsboro">
<td style="BORDER-RIGHT: black 1px solid">
Column 1</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 2</td>
<td style="BORDER-RIGHT: black 1px solid">
Column 3</td>
<td>
Column 4</td>
</tr>
</table>
<div style="BORDER-RIGHT: black 1px solid; OVERFLOW: auto; BORDER-LEFT:
black 1px solid; BORDER-BOTTOM: black 1px solid; HEIGHT: 100px">
<table id="tblContent" border="0" cellpadding="0" cellspacing="0"
width="100%" bgcolor="white">
<tbody>
<tr>
<td style="WIDTH: 67px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data
is specifically designed to wrap-around becuase I am
trying to make a point.</td>
<td style="WIDTH: 125px; BORDER-BOTTOM: black 1px
solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
<td style="BORDER-BOTTOM: black 1px solid">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</div>

Steve C. Orr [MVP, MCSD] · May 14, 2004

You should put the table inside a div with the "overflow" CSS attribute set:
http://www.w3schools.com/css/pr_pos_overflow.asp

bruce barker · May 14, 2004

you have a couple options.

1) use client script to resize headings
2) use div's with overflow set in td's, so cell widths do not blow out.

-- bruce (sqlwork.com)

Shawn B. · May 14, 2004

Yes, but then the header scrolls with the entire table. I want the header
to remain frozen on the screen while having the table "body" scrollable.
There are quite a few working examples (all of which I can find have to be
purchased).

Thanks,
Shawn

Shawn B. · May 14, 2004

I have tried the resizing the header columns according to the width of the
columns of the "body" table but it doesn't work, If the width of the Cell in
the "body" is 100px and I assign the width of that header cell to 100px, the
cell in the body (where scrollbar is (remember, the scrollbar is not in the
header space)) will still be out of aligment... thus, place the following
code after then last div in the HTML I posted earlier:

<script>

FixColumnsWidths(tblContent, tblHeader);

function FixColumnsWidths(refContent, refHeader) {
var colLength = 0;
var col = 0;

var contentCell = null;
var headerCell = null;

if (refContent.rows.length == 0 && refHeader.rows.length == 0) {
alert('Rows dont match.');
return false;
}

if (refContent.rows[0].cells.length !=
refHeader.rows[0].cells.length) {
alert('Columns dont match.');
return false;
}

colLength = refContent.rows[0].cells.length;

for (col = 0; col<colLength; col++) {
contentCell = refContent.cells[col];
headerCell = refHeader.cells[col];

headerCell.width = contentCell.style.pixelWidth; // -
(refContent.cells[col].clientWidth -
refContent.cells[col].style.pixelWidth);

//alert('width: ' + refContent.cells[col].style.width + ',
clientWidth: ' + refContent.cells[col].clientWidth);
}

//alert(refContent.cells[0].clientWidth);
//alert(refContent.cells[0].clientWidth -
refContent.cells[0].style.pixelWidth);
//alert('width: ' + refContent.cells[0].style.pixelWidth + ',
clientWidth: ' + refContent.cells[0].clientWidth);
//alert(refContent.cells[0].clientWidth);

return true;
}

</script>

Steve C. Orr [MVP, MCSD] · May 15, 2004

You need a separate table for the header then. Put that above (not in) your
scrolling div.

--
I hope this helps,
Steve C. Orr, MCSD, MVP
http://Steve.Orr.net

DalePres · May 15, 2004

Try creating a table, put the header in a table within the first row, and
the div for the body table within the second row. That will lock down the
sizes. You'll get some red underlines in VS.Net about not being able to
nest a div within a td but it should work just the same.

Dale

Shawn B. said:
I have tried the resizing the header columns according to the width of the
columns of the "body" table but it doesn't work, If the width of the Cell in
the "body" is 100px and I assign the width of that header cell to 100px, the
cell in the body (where scrollbar is (remember, the scrollbar is not in the
header space)) will still be out of aligment... thus, place the following
code after then last div in the HTML I posted earlier:

<script>

FixColumnsWidths(tblContent, tblHeader);

function FixColumnsWidths(refContent, refHeader) {
var colLength = 0;
var col = 0;

var contentCell = null;
var headerCell = null;

if (refContent.rows.length == 0 && refHeader.rows.length == 0) {
alert('Rows dont match.');
return false;
}

if (refContent.rows[0].cells.length !=
refHeader.rows[0].cells.length) {
alert('Columns dont match.');
return false;
}

colLength = refContent.rows[0].cells.length;

for (col = 0; col<colLength; col++) {
contentCell = refContent.cells[col];
headerCell = refHeader.cells[col];

headerCell.width = contentCell.style.pixelWidth; // -
(refContent.cells[col].clientWidth -
refContent.cells[col].style.pixelWidth);

//alert('width: ' + refContent.cells[col].style.width + ',
clientWidth: ' + refContent.cells[col].clientWidth);
}

//alert(refContent.cells[0].clientWidth);
//alert(refContent.cells[0].clientWidth -
refContent.cells[0].style.pixelWidth);
//alert('width: ' + refContent.cells[0].style.pixelWidth + ',
clientWidth: ' + refContent.cells[0].clientWidth);
//alert(refContent.cells[0].clientWidth);

return true;
}

</script>

bruce barker said:

you have a couple options.

1) use client script to resize headings
2) use div's with overflow set in td's, so cell widths do not blow out.

-- bruce (sqlwork.com)

Click to expand...

I

am

Click to expand...

Shawn B. · May 16, 2004

Did you look at the HTML I posted above? That is the exact thing that I did
and I'm still having the problem that I describe, whereas I see some other
people who have solved the problem and was hoping that someone in these
newsgroups would actually paste my source code into a page and look at what
I'm talking about.

Thanks for you help,
Shawn

Page shows blanc when using template cc and expressions (<%# %>)	3	Mar 25, 2010
Conversion errors from .NET 2.0 ASP.NET...	7	Oct 31, 2005
Firefox wierd align issues	3	Oct 13, 2007
Data Entery Webpage with tables	11	Oct 25, 2008
IE WebControls does not render proper XML and TSNS code	2	Mar 13, 2008
font-size of body style-rule does not work	3	Feb 22, 2007
need help with css. don't see the border, box, and font specification	2	Apr 6, 2008
ModalPopupExtender and DOCTYPE problem	0	Apr 23, 2007

Scrolling Table

Shawn B.

Steve C. Orr [MVP, MCSD]

bruce barker

Shawn B.

Shawn B.

Steve C. Orr [MVP, MCSD]

DalePres

Shawn B.

Ask a Question

Similar Threads