Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Scrollable Table Rows

Status
Not open for further replies.
medic

medic

Programmer
Jun 14, 2000
459
US
I'm trying to use style="overflow:scroll" to make a table with scrollable rows. But the scrollable area appears at the top right before the heading row. Can anybody tell me what am I doing wrong here?
Code: 
<table border=1>
  <tr>
    <td>&ampnbsp</td>
    <td align='center'>Item Description</td>
    <td align='center'>Quantity</td>
  </tr>
  <div style=&quot;overflow:scroll;width:500px;height:100px;&quot;>
  <tr>
     <td>
       <input type=&quot;checkbox&quot; name='cbx' value=Item1>
     </td>
     <td>
        First item
     </td>
     <td align='right'>
       <input type='text' name='qty1' size=2 maxlength=2 value=0>
     </td>
  </tr>
  <tr>
     <td>
       <input type=&quot;checkbox&quot; name='cbx' value=Item2>
     </td>
     <td>
        Second item
     </td>
     <td align='right'>
       <input type='text' name='qty2' size=2 maxlength=2 value=0>
     </td>
  </tr>
  </div>
</table>

TIA

Medic
 
Sort by date Sort by votes
Not sure what you are trying to accomplish here, but maybe try moving the <div> tag to before opening <table> tag and the </div> after the </table> tag?

good luck

RR :)
 
Upvote 0 Downvote
rockyroad,

My idea of the <DIV> tag position is to keep the first <TR> tag pair from scrolling with the rest of the rows. If I am to put those <TABLE> tags inside the <DIV> tags, all rows will be included in the scrollable area.

Here is an illustration of I want to accomplish:
Code: 
-------------------------------------
|    | Item Description  | Quantity | <-- heading (fixed)
|----|-------------------|----------|
| [] | First item        |          | <--
|----|-------------------|----------|    |
| [] | Second item       |          |    |-- scrollable area
|----|-------------------|----------|    |
| [] | Third  item       |          |    |
|----|-------------------|----------| <--
Any suggestions?

Medic
 
Upvote 0 Downvote
Use <tbody> instead of <div>. This is valid code, but on the fringe of what is supported by browsers, so expect buggy behavior.

News and views of some obscure guy
 
Upvote 0 Downvote
Hi

I found a solution in a link in a similar thread.
Here's an example of some code I wrote that worked for me.
I am using ColdFusion, but the table structure should be similar to what you are trying to accomplish

------------------


<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>

<cfquery name=&quot;GetUsers&quot; datasource=&quot;someDatasource&quot;>
SELECT *
FROM User
ORDER BY LastName
</cfquery>

<html>
<head>
<title>No Scroll Header</title>
</head>

<body>

<table summary=&quot;&quot; cellpadding=&quot;0&quot; cellspacing=&quot;1&quot; align=&quot;center&quot;title=&quot;&quot; width=&quot;750&quot; border=&quot;0&quot; bgcolor=&quot;black&quot;>
<tr>
<td>
<table summary=&quot;&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; align=&quot;center&quot; border=&quot;0&quot;>
<tr bgcolor=&quot;gray&quot;>
<td colspan=&quot;5&quot; align=&quot;center&quot;><b>Scrolling Table Example</b></td>
</tr>
<tr bgcolor=&quot;silver&quot;>
<td width=&quot;15%&quot;>
<div align=&quot;center&quot;>NAME</div></td>
<td width=&quot;40%&quot;>
<div align=&quot;center&quot;>EMAIL</div></td>
<td width=&quot;35%&quot;>
<div align=&quot;center&quot;>COMPANY</div></td>
<td width=&quot;7%&quot;>
<div align=&quot;center&quot;>USER id</div></td>
<td width=&quot;3%&quot;>&nbsp;</td>
</tr>
</table>
</td>
</tr>

<tr>
<td>
<div style=&quot;width:100%; overflow:auto;height:150px;&quot;>
<table summary=&quot;&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; bgcolor=&quot;#CCCC99&quot;>

<cfoutput query=&quot;GetUsers&quot;>
<tr>
<td width=&quot;15%&quot;><div align=&quot;center&quot;>#FirstName# #LastName#</div></td>
<td width=&quot;40%&quot;><div align=&quot;center&quot;>#Email#</div></td>
<td width=&quot;35%&quot;><div align=&quot;center&quot;>#Company#</div></td>
<td width=&quot;10%&quot;><div align=&quot;center&quot;>#UserID#</div></td>
</tr>
</cfoutput>

</table>
</div>
</td>
</tr>
</table>

</body>
</html>


RR :)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
914
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
167
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
173
PeDa
PeDa
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
145
vacunita
vacunita
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
176
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top