By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,884 Members | 949 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,884 IT Pros & Developers. It's quick & easy.

Need help with varying table size and scrollbars

P: 3
Hi,

I am a recently converted Iseries (AS/400) RPG programmer trying to learn HTML/CSS/JavsScript all at the same time (not fun). My problem deals mostly with CSS. I will be reveiving a table, for which number of rows/columns i will not know, and I have to pretty up the table, including a verical scroll bar. This has to work in IE6, IE7, and FireFox 3.5.

The CSS I currently have will give me a scrollable table, but only if I hard code in the height (in the TBODY section). If the number of rows are less than a full page size (i.e. no scrollbar is required), the column grow huge (as if they are trying to fill out the entire height with only 4 rows). This will work in IE6, as it seems to automatically set the table size and row height correctly. Also, if I change the height (in TBODY) to AUTO, or 100%, it will work well with a table that has less rows than the page, but will not give me a scrollbar when the number of rows overflow the page.

I will post the CSS here. The HTML doesn't do a whole lot except for set up the THEAD and TBODY sections. There is some JavaScript involved, which converts the table to be sortable.

@CHARSET "ISO-8859-1";

.sqtable {
WIDTH: auto;
BORDER-LEFT: 1px solid #D0D0D0;
BORDER-COLLAPSE: collapse;
MARGIN-LEFT: 0px;
BACKGROUND-COLOR: #EEEEEE;
}

.sqtr {
BACKGROUND-COLOR: #EEEEEE;
}

.sqth {
BORDER-RIGHT: 1px solid #D0D0D0;
BORDER-BOTTOM: 1px solid #D0D0D0;
BORDER-TOP: 1px solid #D0D0D0;
PADDING: 4px 6px 6px;
FONT-SIZE: 10px;
COLOR: #FFFFFF;
FONT-FAMILY: Verdana, Arial;
TEXT-ALIGN: left;
BACKGROUND-COLOR: #444444;
}

.sqthn {
BORDER-RIGHT: 1px solid #D0D0D0;
BORDER-BOTTOM: 1px solid #D0D0D0;
BORDER-TOP: 1px solid #D0D0D0;
PADDING: 4px 6px 6px;
FONT-SIZE: 10px;
COLOR: #FFFFFF;
FONT-FAMILY: Verdana, Arial;
BACKGROUND-COLOR: #444444;
TEXT-ALIGN: right;
COLOR: #CCC;
}

.sqh2 {
FONT-FAMILY: Verdana, Arial;
FONT-SIZE: 20px;
MARGIN-LEFT: 15px;
COLOR: #660000;
TEXT-ALIGN: left;
}

.sqtd {
BORDER-RIGHT: 1px solid #D0D0D0;
BORDER-BOTTOM: 1PX solid #D0D0D0;
PADDING:2px 4px 4px;
BACKGROUND-COLOR: #FFFFFF;
FONT-FAMILY: Verdana, Arial;
FONT-SIZE: 10px;
TEXT-ALIGN: left;
COLOR: #000000;
}

.sqtdn {
BORDER-RIGHT: 1px solid #D0D0D0;
BORDER-BOTTOM: 1px solid #D0D0D0;
PADDING:2px 4px 4px;
BACKGROUND-COLOR: #FFFFFF;
FONT-FAMILY: Verdana, Arial;
FONT-SIZE: 10px;
TEXT-ALIGN: right;
}

.even .sqtd {
BACKGROUND-COLOR: #C0C0C0;
}

.odd .sqtd {
BACKGROUND-COLOR: #FFFFFF;
}

/*
Add the following to your CSS file should you wish the cursor to
"wait" while the script is processing the sort

body.sort-active *
{
cursor:wait;
}
*/

body
{
padding:0;
border:0;
margin:0;
text-align:left;
font-size:10px;
font-family: verdana,arial,sans-serif;
color:#000000;
min-width: 800px;
}
h2
{
font-weight:lighter;
font-family:verdana,arial,sans-serif;
text-align:left;
margin-top:1em;
color:#660000;
text-transform:uppercase;
letter-spacing:1px;
font-size:20px;
}
h2 span
{
font-variant:small-caps;
text-transform:none;
}
table
{
width: auto;
padding: 0;
margin-left: 15px;
border-left: 1px solid #D0D0D0;
border-collapse:collapse;
}
th
{
font: bold 10px/10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
border-right: 1px solid #D0D0D0;
border-bottom: 1px solid #D0D0D0;
border-top: 1px solid #D0D0D0;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
padding: 8px 12px 4px 12px;
background: #D2D2D2;
vertical-align:middle;
}
td.total
{
border-top: 0;
border-left: 0;
border-right: 1px solid #D0D0D0;
background: D2D2D2;
text-align:right;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1px;
}
th.sortable,
th.sortable-text,
th.sortable-date,
th.sortable-keep,
th.sortable-date-dmy,
th.sortable-numeric,
th.sortable-currency,
th.sortable-sortByTwelveHourTimestamp,
th.sortable-sortIPAddress,
th.sortable-sortEnglishLonghandDateFormat,
th.sortable-sortScientificNotation,
th.sortable-sortImage,
th.sortable-sortFileSize,
th.sortable-sortAlphaNumeric,
th.sortable-sortEnglishDateTime

{
cursor:pointer;
background: #444444 url(media/sort.gif) left no-repeat;
padding: 8px 12px 4px 16px;
}
th.forwardSort
{
background:#000000 url(media/desc.gif) left no-repeat;
}
th.reverseSort
{
background:#000000 url(media/asc.gif) left no-repeat;
}
table thead th.forwardSort a,
table thead th.reverseSort a
{
color:#FFFFFF;
text-decoration:none;
}
/*
These styles should be added when very long tables are expected
th.sort-active
{
background:#F2F2F2 url(media/bg_header_sorting.jpg) no-repeat 0 0;
cursor:wait;
}
th.sort-active a
{
color:#FFFFFF !important;
cursor:wait;
}
*/
th a
{
text-decoration:none;
color: #FFFFFF;
background:transparent;
}
td a
{
text-decoration:none;
color:#000000;
background:transparent;
}
td img
{
margin:0 auto;
border:3px solid #ddd;
}
td a:hover
{
color:#a84444;
border-bottom:1px dotted #a80000;
background:transparent;
}
td
{
font: normal 10px Verdana, Arial, "Trebuchet MS", Helvetica, sans-serif;
border-right: 1px solid #D0D0D0;
border-bottom: 1px solid #D0D0D0;
padding: 2px 4px 4px;
text-align: left;
color: #000000;
}
td.lft
{
text-align:left;
}
tr.alt
{
background: #C0C0C0;
color: #000000;
}

tbody {
overflow: auto;
height: 400px;
width: 100%;
*overflow: visible;
*height: auto;
}
/* Poor old Internet Explorer 6 has a bug that means we can't use background images for the table rows
as it trys to download the image each and every time that it is used (which means a 1000 row table
will produce 1000 http requests for the image in question) */
tr[class="alt"] td
{
background: #C0C0C0;
}
td[class~="alt"]
{
background: #FFFFFF;
}
/* Poor old Internet Explorer won't see the next two rules either as it doesn't get :first-child */
tbody tr.alt td:first-child
{
background: #C0C0C0;
}
tbody tr td:first-child
{
background: #fff;
}
/* Image free rules for Internet Explorer < 7 */
html tr.alt td
{
background-color:#C0C0C0;
}

* html tr td.alt,
* html tr.alt td.alt
{
background-color:#FFFFFF;
}
/*.VIEWFMT {
height: 300px;
}*/

@media screen {
div#VIEWFMT {
height: 400px;
overflow: hidden;
WIDTH: 500px;
*width: 550px;
*overflow: auto;
}
th {
*position: relative;
top: expression(document.getElementById("VIEWFMT").scro llTop-1);
}
}

Sorry for the length of the code.

Any help will be appreciated.

Thanks.

Steve.
Jul 28 '09 #1
Share this Question
Share on Google+
5 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Giving us only the CSS is like showing us the color of a coloring book without the lines. We do need the complete generated HTML to see what's going on. If you have this online, it's even better.

This will work in IE6, as it seems to automatically set the table size and row height correctly.
Let's not start with IE6. We have to get it to work in a modern browser first, Firefox, to make sure the markup is all correct, then we'll probably have to hack IE to make that work, and then again for IE6, which could be scary.
Jul 28 '09 #2

P: 3
Hi drhowarddrfine,

I agree with your comment about IE6. The only reason it works there is probably because it is doing everything wrong - it just happens to look right.

I don't have an online page I can direct you to - this is currently being done in test mode. My dilemma is this: I need to be able to receive any size table and present the user with a view that will show a scrollbar if it is too large for the page, or no scrollbar if it will fit on the page. I also need the right border, where the scrollbar is positioned, to be flexible, as I will have no idea of the number of columns in the table.

Currently, If I set the height in the TBODY to, say, 400px, I will get the scrollbar and it will work correctly. But, if I modify the HTML and only send in around 4 or 5 rows of data, it is trying to fit all 4 or 5 rows in the table based on that 400px setting in the TBODY - each row becomes rather large. If I set the height to AUTO, the small tables work fine, but I lose my scrollbar on the larger ones (I am so confused). Man, RPG was a lot easier, even though it couldn't do this type of stuff. After 20 years of RPG programming, at least I could pretend I knew what i was doing.

Anyway, here is the HTML:

<html>

<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><!-- /Added by HTTrack -->
<head>

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</head>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><!-- /Added by HTTrack -->
<head>
<title>Sequel Web Query</title>
<link href="SEQUEL/SEQUEL_GANZ.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="SEQUEL/tablesort.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body topmargin="0" leftmargin="0" topmargin="0"
>

<!------------ HEADER ENDS HERE, VIEW RESULTS START HERE --------------------->
</body>

<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><!-- /Added by HTTrack -->
</html>


<HTML>
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><!-- /Added by HTTrack -->
<HEAD><TITLE>BCSTEST - SEQUEL Web Interface Test - Do NOT Delete Table</TITLE></HEAD>
<BODY><H2 class="sqh2">SEQUEL Web Interface Test - Do NOT Delete Table</H2>
<div id=VIEWFMT><TABLE id="sqtable" class="sqtable">
<THEAD>
<TR class="sqtr"><TH class="sqth"><BR><BR>Library</TH><TH class="sqth"><BR><BR>Object</TH><TH class="sqth"><BR>Object<BR>Type</TH><TH class="sqth"><BR><BR>Text description</TH></TR>
</THEAD><TBODY>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">EDIONR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">EDI: EDI400 Owner User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZPGMR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Development Programmer's Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZREADONLY</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Production Read-Only Access Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHRDO</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QTMPLPD</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Allow Remote LPR Requesters</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">EDIONR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">EDI: EDI400 Owner User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZPGMR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Development Programmer's Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZREADONLY</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Production Read-Only Access Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHRDO</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QTMPLPD</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Allow Remote LPR Requesters</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">EDIONR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">EDI: EDI400 Owner User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZPGMR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Development Programmer's Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZREADONLY</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Production Read-Only Access Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHRDO</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QTMPLPD</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Allow Remote LPR Requesters</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">EDIONR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">EDI: EDI400 Owner User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZPGMR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Development Programmer's Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZREADONLY</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Production Read-Only Access Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHRDO</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QTMPLPD</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Allow Remote LPR Requesters</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">EDIONR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">EDI: EDI400 Owner User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZPGMR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Development Programmer's Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZREADONLY</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Production Read-Only Access Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHRDO</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QTMPLPD</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Allow Remote LPR Requesters</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">EDIONR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">EDI: EDI400 Owner User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZPGMR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Development Programmer's Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZREADONLY</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Production Read-Only Access Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHRDO</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QTMPLPD</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Allow Remote LPR Requesters</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">EDIONR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">EDI: EDI400 Owner User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZPGMR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Development Programmer's Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">GZREADONLY</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">GROUP: Production Read-Only Access Group</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHR</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QDBSHRDO</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Internal Data Base User Profile</TD></TR>
<TR class="sqtr"><TD class="sqtd">QSYS</TD><TD class="sqtd">QTMPLPD</TD><TD class="sqtd">*USRPRF</TD><TD class="sqtd">IBM: Allow Remote LPR Requesters</TD></TR>
</TBODY></TABLE></DIV></BODY>
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><!-- /Added by HTTrack -->
</HTML><!--<img src="SEQUEL/blue_bar.jpg" width="100%" height="5" vspace="12"> -->
<hr>
<!--<a href="SEQUEL/help/sequelwi.htm" target="_blank"><b><u>Help?</u></b><br>-->
<!--<br>-->
<!--</a>-->
<div id="div1"><a name='back'
href='javascript: void window.scrollTo(1,1)'> <b><u>Top of Page</u></b></a><br>
<br>
</div>
<div id="div2"><a name='back' href='javascript: void history.back()'> <b><u>Previous
Page</u></b></a><br>
<br>
</div>
<!--<br>-->
<!--<br>-->
<div></div>
<script type="text/javascript">
var isNav = navigator.appName == "Netscape";
if (!isNav) {
document.all.div2.innerHTML="<a name='back' onclick='history.back()'" +
" onmouseover=" + '"' + "window.status='Click here to go to the previous page'" + '"' +
" title='Return to the previous page viewed' " +
" onmouseout=" + '"' + "window.status=' '" + '">' +
"<b><U>Previous Page" +
"</U></b></a><br><br>";
document.all.div1.innerHTML="<a name='back' onclick='window.scrollTo(1,1)'" +
" onmouseover=" + '"' + "window.status='Click here to go to the top of the page'" + '"' +
" title='Go to the top the current page' " +
" onmouseout=" + '"' + "window.status=' '" + '">' +
"<b><U>Top of Page " +
"</U></b></a><br><br>";
}
</script>
<div id="viewfmt"></div>


Sorry about the length of the post. There is also some Javascript involved (about which I know less than nothing), so if you need that, please let me know.

Thanks for your time - i appreciate it.

Steve.
Jul 29 '09 #3

drhowarddrfine
Expert 5K+
P: 7,435
If you copied all that correctly, then this part is a duplicate and the first needs to be removed:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><!-- /Added by HTTrack -->
  4. <head>
  5.  
  6. <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
  7. </head>
  8.  
That will put IE into quirks mode.

Also, the doctype is incorrect. Use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


btw, you need to enclose your markup in code tags, ie, <code></code> only with square brackets.
Jul 29 '09 #4

drhowarddrfine
Expert 5K+
P: 7,435
Everything between <html> and <head> needs to be removed since it's a duplicate and doesn't belong there.

Validate your html here and your CSS here.
Jul 29 '09 #5

P: 3
thanks drhowarddrfine,

I will do that.

Steve.
Jul 29 '09 #6

Post your reply

Sign in to post your reply or Sign up for a free account.