Scrollable table with fixed header (tutorial? also IE9)

Hi,
Does someone know of a tutorial about scrollable tables with a fixed header. Is there one on the adobe site. I found some on the net, but those didn't work for IE9. I favour the simple solutions.
I tried one, using only a few lines of CSS and the use of the thead and tbody tags in the table, but it didn't work on IE9.
Here is an example, of what I ment:
http://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/
I thank those, who red this.

Thanks, that is a very cool way to divide a layout of a web-page!
Can I also use this to split up a header and table body region inside a large table you want to present compact inside a webpage?
html:
<body>
<table>
     <thead>
          <th>
          </th>
     </thead>
     <tbody>
          <td>
          </td>
     </tbody>
</table>
</body>

Similar Messages

Table with fixed header

Hi Guys,
Any idea how to create a table with fixed header. I know I have the option to use pagination controls. But our requirement is such that we can't have pagination controls but scrolling only.
I also have an idea that I need to set some CSS style for table header. But where to set that in JSCreator datatable or table component.
Please help me as it is my urgent requirement.
Thanks !

Hi,
Any idea regarding how to do it ?
-regards
sompan

Scrollable table with fixed column headings problem

Dear list members,
A while ago I asked on this forum for a way to code a
scrollable table with fixed headings and I was kindly given the
HTML and CSS code to do that. Using the method I was given I coded
the following simple test case. It works under IE but under
Netscape the column headings scroll up instead of remaining fixed.
The code works fine in IE. Can anyone tell me what I'm doing wrong
or if there is a workaround.
Thanks,
Harry

The method you were given will only work in IE because only
IE understands
"expression" in CSS rules.
I'm afraid things are going to be a little more complicated
for you, but
it's not impossible.
Give this method a shot:
http://www.imaputz.com/cssStuff/bulletVersion.html
"harryspier" <[email protected]> wrote in
message
news:e53s1a$dv9$[email protected]..
> <style>
> div .headings {position:relative;
> top:expression(this.offsetParent.scrollTop);}
> </style>

Table with fixed header and scroll bar

Was able to use Dreamweaver 2004 to set up a table to display
data from a MySQL table. But then the customer wanted to have a
scroll bar on one side and fixed headers at the top "like Excel",
because the number of rows retrieved were too long to fit on a
page. This was harder than I thought. I had to use CSS and
Javascript with a lot of help to make this happen. Then it didn't
work in IE7, so I had to use a different approach for IE. I got it
to almost work perfectly in IE7. It just has a tiny bit of the
table visible scrolling by above the header rows.
http://www.ykfp.org/php/lyletrap/tabletotalscss13.php
Why does Microsoft make this so difficult? Why aren't web standards
good enough for Microsoft? Is there a better approach to tables
with scroll bars?

When things go sour in any browser, validate your code. I see you have some unclosed <table> tags which could effect page rendering.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.ykfp.org%2Fphp%2Flyletrap%2Ft abletotalscss09.php
If you still have problems with IE8 after fixing the code errors, try adding this meta tag to your <head>. It forces IE8 into IE7 mode.
<meta http-equiv="X-UA-Compatible" content="IE=7">
Hope that helps,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

How do I make the headers on a sortable, scrollable table stay fixed in Firefox 4?

In firefox 3 and prior versions, we were able to make the header on a sortable, scrollable table stay fixed and not scroll out of site when we scrolled the table, by putting the table in a div, and using css to indicate that the div should use overflow:auto and overfow-x:hidden. The tbody also used overflow:auto and overflow-x: hidden. The thead used position:relative. For the sort to work correctly the thead and tbody must be contained within the same table.

A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.<br />
The helpers at that forum are more knowledgeable about web development issues.<br />
You need to register at the mozillaZine forum site in order to post at that forum.<br />
See http://forums.mozillazine.org/viewforum.php?f=25

Table with two header rows

Hello, i have a table in that table i have a header row which has another table with two header rows
When form spans more then one page on page2 the color and border are showing up outside of table see example below.
Anyone have any ideas how I can fix this?
I am using Livecycle designer ES2 9.***
THanks

Hi,
If the table spans to Next page then if you want to move whole table to other page then uncheck the allow page breaks with content option which is under Object Tab.
Thanks
Vjay.

Internal table with out header line

Hi friends,
Can u send me code for internal table with out header line : how to declare ,how to populate data and how to access the data
Regards,
vijay

Hi Vijay
There are several ways to declare an internal table without header line:
A) You can define a type table
TYPES: BEGIN OF TY_ITAB OCCURS 0,
        INCLUDE STRUCTURE ZTABLE.
TYPES: END   OF TY_ITAB.
and then your intrnal table:
DATA: ITAB TYPE TY_ITAB.
B) DATA: ITAB TYPE/LIKE STANDARD TABLE OF ZTABLE.
C) DATA: ITAB TYPE/LIKE ZTABLE OCCURS 0.
All these ways create a STANDARD TABLE
You can create other types of internal table, for example SORTED TABLE or HASHED TABLE.
These kinds of table can allow to improve the performance because they use different rules to read the data.
When it wants to manage a table without header line, it need a work area, it has to have the same structure of table.
DATA: WA LIKE ZTABLE.
DATA: T_ZTABLE LIKE STANDARD TABLE OF ZTABLE.
A) To insert the record:
If you use INTO TABLE option you don't need workarea
SELECT * FROM ZTABLE INTO TABLE T_ZTABLE
                                  WHERE FIELD1 = 'Z001'
                                    AND FIELD2 = '2006'.
but if you want to append a single record:
SELECT * FROM ZTABLE INTO wa WHERE FIELD1 = 'Z001'
                               AND FIELD2 = '2006'.
APPEND WA TO T_ZTABLE.
ENDSELECT.
Now you need workarea.
B) To read data: you need always a workarea:
LOOP AT T_ZTABLE INTO WA WHERE ....
WRITE: / WA-FIELD1, WA-FIELD2, WA-FIELD3.
ENDLOOP.
or
READ T_ZTABLE INTO WA WITH KEY FIELD3 = '0000000001'.
IF SY-SUBRC = 0.
WRITE: / WA-FIELD1, WA-FIELD2, WA-FIELD3.
ENDIF.
Anyway if you want to know only if a record exists, you can use the TRANSPORTING NO FIELDS option, in this case it doesn't need a workarea.
READ T_ZTABLE WITH KEY FIELD3 = '0000000001'
                                  TRANSPORTING NO FIELDS.
IF SY-SUBRC = 0.
WRITE 'OK'.
ENDIF.
C) To update the data: it always needs a workarea
LOOP AT T_ZTABLE INTO WA WHERE FIELD3 = '0000000001'.
WA-FIELD3 = '0000000002'.
MODIF T_ZTABLE FROM WA.
ENDLOOP.
or
READ T_ZTABLE INTO WA WITH KEY FIELD3 = '0000000001'.
IF SY-SUBRC = 0.
WA-FIELD3 = '0000000002'.
MODIF T_ZTABLE FROM WA INDEX SY-TABIX
ENDIF.
AT the end you can use the internal table to update database:
MODIFY/UPDATE/INSERT ZTABLE FROM T_ZTABLE.
See Help online for key words DATA, you can find out more details.
Max
Message was edited by: max bianchi

Interactive report with fixed header

hi @all
is it possible to create a scrollable interactive (freeze panes) report?
if so how?

include the frs-table-header.js and jquery in your html header
the frsIRSetup checks the value of a checkbox (#P' + gPAGEID + '_FREEZE_TABLE_HEADER_0) on the page so our users can enable/disable the freezing. and can just remove the if logic or hardcode the value of chk in frsIRSetup to always be true if you want to always enable scrolling.
this should work for both IE and Firefox.
I also include the following in the html header to make javascript files easy to deal with
<script language="JavaScript1.1">
var gAPPID = &APP_ID.;
var gSESSION = &SESSION.;
var gDEBUG = "&DEBUG.";
var gPAGEID = &APP_PAGE_ID.;
</script>frs-table-header.js
* browser identity
var cBrowserMozilla = "mozilla";
var cBrowserMSIE = "msie";
var cBrowserSafari = "safari";
var cBrowserOpera = "opera";
var gBrowser;
var gOldInit;
var gIRInit = false;
function setBrowser() {
var b = $.browser;
if (b.mozilla)
    gBrowser = cBrowserMozilla;
else if (b.msie)
    gBrowser = cBrowserMSIE;
else if (b.safari)
    gGrowser = cBrowserSafari;
else if (b.opera)
    gBrowser = cBrowserOpera;
else gBrowser = null;
* ir scroll support
var frsIRHeight = '500px';
function frsIRInit(pId) {
this.l_Action = false;
this.l_Type = false;
this.ajax_busy = false;
if(!!pId){this.worksheet_id = pId}
this.report_id = ($v('apexir_REPORT_ID'))?$v('apexir_REPORT_ID'):'0';
this.get = new htmldb_Get(null,$v('pFlowId'),'APXWGT',$v('pFlowStepId'));
var tab = $("table.apexir_WORKSHEET_DATA");
var head = $("tbody tr:fiest-child", tab).html();
if (gIRInit == false) {
    gIRInit = true;
    $("tbody", tab).before("<thead>" + head + "</thead>");
    $("tbody tr:first-child", tab).remove();
if (gBrowser == cBrowserMozilla) {
    $("tbody", tab).css({'overflow-y' : 'auto', 'overflow-x' : 'hidden', 'height' : frsIRHeight});
    tab.css({'border-collapse' : 'separate'});
} else if (gBrowser == cBrowserMSIE) {
    tab.wrap('<div id="frsIR" style="overflow-y: auto; overflow-x: hidden; height: '+frsIRHeight+'; width: 100%; position: relative"></div>');
    $("thead tr th", tab).addClass("frsHeaderIRScroll");
function frsIRSetup() {
var chk = $('#P' + gPAGEID + '_FREEZE_TABLE_HEADER_0').is(':checked');
setBrowser();
if (gBrowser == null)
    return;
if (gOldInit == null) {
    gOldInit = gReport.init;
if (chk) {
    gReport.init = frsIRInit;
} else {
    var tab = $("table.apexir_WORKSHEET_DATA");
    $("thead tr th", tab).removeClass("frsHeaderIRScroll");
    $("tbody", tab).removeAttr("style");
    gReport.init = gOldInit;
gReport.init();
}Add the following to the IR region footer
<script type="text/javascript">addLoadEvent(frsIRSetup);</script>

How to sort an internal table with a header line?

hi all,
i have declared table i_bseg type standard table of bseg with header line.
now i have populated data in i_bseg.
now i am sorting it by bukrs
ie i am writing sort i_bseg by bukrs.
before sorting all i_bseg-belnrs were populated...
but after sorting the contents of the i_bseg is changing.
some of the belnrs are getting deleted..
is there any special way to sort an internal table with header line...?

hi,
<b>SORT <itab> [ASCENDING|DESCENDING] [AS TEXT] [STABLE].</b>
The statement sorts the internal table <itab> in ascending order by its key.<b> The statement always applies to the table itself, not to the header line</b>.
If you have an internal table with a structured line type that you want sort by a different key, you can specify the key in the SORT statement:
SORT <itab> [ASCENDING|DESCENDING] [AS TEXT] [STABLE]
BY <f1> [ASCENDING|DESCENDING] [AS TEXT]
<fn> [ASCENDING|DESCENDING] [AS TEXT].
<b>this is your sort statement: sort i_bseg by bukrs.
you try with this statement: sort i_bseg by bukrs STABLE.</b>
regards,
Ashokreddy

Creating scrollable table with maximum size of 10 in jsp

Hi,
How to limit the maximum rows that the user can enter in the scrollable table

What's a scrollable table?
If you mean a text area, then you can't limit how much the user can enter. You can only limit how much is displayed with the rows and cols attributes. To stop the user from entering more, you need to JavaScript to check how much has been entered. Search for scripts to do that, you'll find quite a few.
People on the forum help others voluntarily, it's not their job.
Help them help you.
Learn how to ask questions first: http://faq.javaranch.com/java/HowToAskQuestionsOnJavaRanch
(Yes I know it's on JavaRanch but I think it applies everywhere)
----------------------------------------------------------------

How to create a cutoms table with a heading

Dear Freinds,
I have a requirement where i have to create the Custom as below .........my functional is
saying that he want table as below
outpatient
employeeno
class
startdate
enddate
spouse
1stchild
2nchild
How can we create like this table having outpatient as heading
and a fields as
employeeno , class,startdate,enddate,spouse,1stchild,2ndchild
how can we create in a custom table..... i have never seenlike the above requiremnt.
Please suggest me how to create. I can send the Excel sheet where they have given the above requiremnt...... plelase any body can suggest me so that i can your personnel id's . Pleast a bit urgent.
regards
syamala

While waiting to hear back, I was able to write the query results from an outside Oracle server, to a table on the local SQL Server, and do the LEFT OUTER JOIN required for the final query and report to work. That was with this syntax:
<CFQUERY name="AddTableRecords" datasource="MyTable">
TRUNCATE TABLE ITE_Temp
<CFOUTPUT query="ITE2">
INSERT INTO ITE_Temp
(FullFile,EmployeeCount,DTL_Amount,EmployeeType,station)
VALUES
('#TrueFile#', #CountOfEmployee#, #DTL_SUBTOT#, '#EMPTYPE#', '#ARPT_CD#')
</CFOUTPUT>
</CFQUERY>
However, I was not able to write to a temporary table AND read the results. I got the syntax to run to write the above results to a temporary table. But when I tried to read and output the results from the temp table, I got an error. Also, it wouldn't take the single "#" (local) only the global "##" table var, using this syntax. Note that if I didn't have the DROP TABLE in the beginning, the 2nd time you run this query, you get an error telling you the table already exists.
<CFQUERY name="ITE_Temp2" datasource="MyTable">
DROP TABLE ##MyTemp2
CREATE TABLE ##MyTemp2
FullFile char (7) NOT NULL,
EmployeeCount int NULL,
DTL_Amount decimal NULL,
EmployeeType char (3) NULL,
station char (3) NULL
<CFOUTPUT query="ITE2">
INSERT INTO ##MyTemp2 VALUES
'#ITE2.TrueFile#',
#ITE2.CountOfEmployee#,
#ITE2.DTL_SUBTOT#,
'#ITE2.EMPTYPE#',
'#ITE2.ARPT_CD#'
</CFOUTPUT>
</CFQUERY>
So even though the above works, I could use some help in reading/writing the output. I've tried several things similar to below, but they don't work. It't telling me ITE_Temp2 does not exist. It's not easy to find good examples of creating temporary tables in SQL Server.
<CFQUERY name="QueryTest2" datasource="SkynetSQL">
SELECT *
FROM ITE_Temp2
</CFQUERY>
<CFOUTPUT query="ITE_Temp2">
Output from Temp Table<br>
<p>FullFile: #FullFile#, EmployeeCount: #EmployeeCount#</p>
</CFOUTPUT>
Thanks for any help/advice.
Gary.

Data table with fixed column with

I have a data table bound to a row set , and I would like the table to have fixed column widths to avoid unpleasant display shifts when paging through it.
The column component does not have too many properties I can work with (maybe this can be fixed in a future release??). Therefore I tried setting the style property of the output text object inside the column. The result looks good in the IDE, but reverts to variable column widths in the browser. I even tried setting the style property at runtime, with no luck.
Unfortunately I can't pad the column header with spaces, because output text has the annoying habit of converting any group of more than one blank space character to one char only (by the way, any remedy to that?). Trying to drop a grid or group panel in place of the column header and pad the column title with invisible (i.e. color: white) output texts did not work either...
Any ideas??
Thanks,
Luca

I took a look at the html encoder for data table and here's a trick you can use:
Go to your stylesheet (by default resources/stylesheet.css: open the Resources node in the project navigator and double click on stylesheet.css).
Let's say you want three columns - so add something like the following to the stylesheet:
.colwidth1 { width: 200px }
.colwidth2 { width: 400px }
.colwidth3 { width: 300px }
Save the stylesheet (ctrl-S).
Now, back in the designer, right click and select "Refresh" to ensure that the new stylesheet edits are discovered.
Then go to the designer surface, and select the data table (make sure it's selected, not one of its children like columns or output texts - if so hit Escape to pop to parent, or just click on it directly in the app outline.)
Go to the "columnClasses" property in the property sheet - and enter "colwidth1, colwidth2, colwidth3". Note - no dots here. If you have more than 3 columns you would obviously add additional columns here.
The table should now use the desired column widths - including the browser.

Dynamic internal table with dynamic header

Hi Members,
I have created a dynamic report ie In the selection screen i will give set of GL accounts.
Based on the GL it will separate a col like Sales GL, PF GL , Discount Gl etc. In the header portion first 3 col is constant ie it will show the vendor name and material and text remaining col is based on the GL entered in the screen it will cumulate the Total Amount and display accordingly.
This is working fine in ALV grid display, but i required to download the data to excel , while downloading to excel i am getting only the values without header,
ie title of the each col not getting . kindly guide me to solve this issue.
If i entered only sales GLs (100,101,102 ) then my output should be
vendor material mateial text 100 101 102
ddddd 11100 Raw salt 2000 1000 2500
Regards,
Mee.S

Hi Meenakshi,
As per my knowledge two ways of doing it...
1. when u get the final internal table..check for the fields with not initial...again update the header internal table dynamically..
2. if you get GL or PF or any such thing you can hardcode the header and display it on to excel..
Regards,
Vamshi

How to print Table with fixed height?

Hi,
I am developing an invoice. I am printing the invoice lines in a table and the number of lines may vary.
I am using the table to print the lines in word rtf template. The table cells don't have the border.
I am facing the following problems:
1. The table height varies based on the number of invoice lines. I don't want that. I want to fix the table height. I can draw the line and create the table, that may solve this problem for 1 page invoice, but that doesn't solve next issue i.e. issue #2.
2. If the invoice goes beyond 1 page, then the table continues and on the 1st page the table is open from the bottom, as I have table without the internal cell border. I want close the table on the 1st page and rewrite the table in the 2nd page.
Please let me know, if you have any solution for these issues.
Thanks!!
Edited by: Sanket_Bhabad on May 17, 2013 8:01 AM

Take a look at this blog post: https://blogs.oracle.com/xmlpublisher/entry/anatomy_of_a_template_i_fixed
Thanks,
Bipuser

How can I display a table(with column Header) on the frame(contentPane)?

(Can dynamically: Insert,remove,modify )
I have no idea which class I need.

here's a handy link
[url http://java.sun.com/docs/books/tutorial/uiswing/components/table.html]tables
and look into javax.swing.table.TableModel

Scrollable table with fixed header (tutorial? also IE9)

Similar Messages

Maybe you are looking for