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

Similar Messages

  • 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>

  • 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

  • Data Table Fixed rows and Scroll Bar

    Hi
    I have data table which displays the data dynamically, but when there is no data , the table is shrinking and moving the other elements of the page. Is there any way i can keep to fixed number of rows irrespective of data presence?
    Like i need to display only 10 rows at a time, if there are 7 rows in DB, i have t o display 7 rows containing data and rest as blank .
    If my data increases more than 10 rows how can i enable Scroll Bar Automatically on this?
    Thanks in advance.

    Then add empty row objects to the collection or datamodel which is been passed to the datatable value.

  • 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>

  • Download internal table data into excel sheet with column heading and data

    Hi,
      I am having one internal table with column headings and other table with data.
    i want to download the data with these tables into an excel sheet.
    It should ask the user for file name to save it on their own name. They should give the file name in runtime and it should be downloaded into an excel sheet.
    Can anyone tell what is the right function module for downloading these two internal table data with column heading and data.
    what we have to do for storing the file name in runtime.
    Can anyone help me on this.
    Thanks,
    Rose.

    Hi Camila,
        Try this
    CALL FUNCTION 'GUI_DOWNLOAD'
      EXPORTING
        FILENAME                        = PATH2
       FILETYPE                        = 'XLS'
      TABLES
        DATA_TAB                        = IT_DATA
       FIELDNAMES                      = IT_HEADINGS
    EXCEPTIONS
       FILE_WRITE_ERROR                = 1
       NO_BATCH                        = 2
       GUI_REFUSE_FILETRANSFER         = 3
       INVALID_TYPE                    = 4
       NO_AUTHORITY                    = 5
       UNKNOWN_ERROR                   = 6
       HEADER_NOT_ALLOWED              = 7
       SEPARATOR_NOT_ALLOWED           = 8
       FILESIZE_NOT_ALLOWED            = 9
       HEADER_TOO_LONG                 = 10
       DP_ERROR_CREATE                 = 11
       DP_ERROR_SEND                   = 12
       DP_ERROR_WRITE                  = 13
       UNKNOWN_DP_ERROR                = 14
       ACCESS_DENIED                   = 15
       DP_OUT_OF_MEMORY                = 16
       DISK_FULL                       = 17
       DP_TIMEOUT                      = 18
       FILE_NOT_FOUND                  = 19
       DATAPROVIDER_EXCEPTION          = 20
       CONTROL_FLUSH_ERROR             = 21
       OTHERS                          = 22

  • How to fix double vertical scroll bar in responsive output

    After implementing the solution provided for the question 'Responsive HTML5 Output: How to auto adjust the screen resolution for all devices?', the function bar in output does not appear and also another vertical scroll bar in the output. I edited the max-width value in the layoutfix.min.css file and fixed the function bar issue. How can I do away with the additional vertical scroll bar?

    I've looked into the issue.
    @Delennish: In your case, the size of the iframe is too large, or you have an extra empty element below the iframe. You can try 2 things:
    1. Best solution but may have side effects: In the main.css, add the following code:
    div.contentholder { overflow: hidden !important;}
    For this option, please check for undesired side effects.
    2. Works, but is ugly: In the main.css, add the following code:
    div.floatholder iframe.wTopic { height: 95% !important;}
    Try playing with the height setting until the 2nd scrollbar disappears.
    @CarolW: The layout you're using is very old. I've made a new responsive layout with TOC only. Please use that one instead: http://www.wvanweelden.eu/sites/default/files/attachments/Theme1_Standard_TOC_Only.zip (I'll update my site with this new version later.)

  • JTable can't display column names and scroll bar in JDialog !!

    Dear All ,
    My flow of program is JFrame call JDialog.
    dialogCopy = new dialogCopyBay(frame, "Bay Name Define", true, Integer.parseInt(txtSourceBay.getText()) ,proVsl ,300 ,300);
    dialogCopy.setBounds(0, 0, 300, 300);
    dialogCopy.setVisible(true);        Then,I set the datasource of JTable is from a TableModel.
    It's wild that JTable can diplay the data without column names and scroll bar.
    I have no idea what's going wrong.Cause I follow the Sun Tutorial to code.
    Here with the code of my JDialog.
    Thanks & Best Regards
    package com.whl.panel;
    import com.whl.vslEditor.vslDefine;
    import java.awt.Container;
    import java.awt.Dimension;
    import java.awt.Frame;
    import javax.swing.JDialog;
    import javax.swing.JScrollPane;
    import javax.swing.JTable;
    import javax.swing.table.AbstractTableModel;
    public class dialogCopyBay extends JDialog {
        vslDefine glbVslDefine;
        int lvCnt = -1;
        JTable tableCopyBay;
        int bgnX = 0;
        int bgnY = 30;
        int tableWidth = 100;
        int tableHeight = 100;
        public dialogCopyBay(Frame frame, String title, boolean modal, int sourceBay,
                vslDefine pVslDefine, int ttlWidth, int ttlHeight) {
            super(frame, title, true);
            Container contentPane = getContentPane();
            System.out.println("dialogCopyBay Constructor");
            glbVslDefine = null;
            glbVslDefine = pVslDefine;
            copyBayModel copyBay = new copyBayModel((glbVslDefine.getVslBayStructure().length - 1),sourceBay);
            tableCopyBay = new JTable(copyBay);
            tableCopyBay.setPreferredScrollableViewportSize(new Dimension(tableWidth, tableHeight));
            JScrollPane scrollPane = new JScrollPane(tableCopyBay);
            scrollPane.setViewportView(tableCopyBay) ;
            tableCopyBay.setFillsViewportHeight(true);
            tableCopyBay.setBounds(bgnX, bgnY, tableWidth, tableHeight);
            tableCopyBay.setBounds(10, 10, 100, 200) ;
            contentPane.setLayout(null);
            contentPane.add(scrollPane);
            contentPane.add(tableCopyBay);
        class copyBayModel extends AbstractTableModel {
            String[] columnNames;
            Object[][] dataTarget;
            public copyBayModel(int rowNum ,int pSourceBay) {
                columnNames = new String[]{"Choose", "Bay Name"};
                dataTarget = new Object[rowNum][2];
                for (int i = 0; i <= glbVslDefine.getVslBayStructure().length - 1; i++) {
                    if (pSourceBay != glbVslDefine.getVslBayStructure().getBayName() &&
    glbVslDefine.getVslBayStructure()[i].getIsSuperStructure() == 'N') {
    lvCnt = lvCnt + 1;
    dataTarget[lvCnt][0] = false;
    dataTarget[lvCnt][1] = glbVslDefine.getVslBayStructure()[i].getBayName();
    System.out.println("lvCnt=" + lvCnt + ",BayName=" + glbVslDefine.getVslBayStructure()[i].getBayName());
    public int getRowCount() {
    return dataTarget.length;
    public int getColumnCount() {
    return columnNames.length;
    public String getColumnName(int col) {
    return columnNames[col];
    public Object getValueAt(int rowIndex, int columnIndex) {
    return dataTarget[rowIndex][columnIndex];
    public Class getColumnClass(int c) {
    return getValueAt(0, c).getClass();
    public boolean isCellEditable(int row, int col) {
    if (col == 1) {
    // Bay Name Not Allow To modify
    return false;
    } else {
    return true;
    public void setValueAt(Object value, int row, int col) {
    dataTarget[row][col] = value;
    fireTableCellUpdated(row, col);

    Dear DB ,
    I am not sure what you mean.
    Currently,I don't undestand which code is error.
    And I also saw some example is add JTable and JScrollPane in JDialog.
    Like Below examle in Sun tutorial
    public class ListDialog extends JDialog implements MouseListener, MouseMotionListener{
        private static ListDialog dialog;
        private static String value = "";
        private JList list;
        public static void initialize(Component comp,
                String[] possibleValues,
                String title,
                String labelText) {
            Frame frame = JOptionPane.getFrameForComponent(comp);
            dialog = new ListDialog(frame, possibleValues,
                    title, labelText);
         * Show the initialized dialog. The first argument should
         * be null if you want the dialog to come up in the center
         * of the screen. Otherwise, the argument should be the
         * component on top of which the dialog should appear.
        public static String showDialog(Component comp, String initialValue) {
            if (dialog != null) {
                dialog.setValue(initialValue);
                dialog.setLocationRelativeTo(comp);
                dialog.setVisible(true);
            } else {
                System.err.println("ListDialog requires you to call initialize " + "before calling showDialog.");
            return value;
        private void setValue(String newValue) {
            value = newValue;
            list.setSelectedValue(value, true);
        private ListDialog(Frame frame, Object[] data, String title,
                String labelText) {
            super(frame, title, true);
    //buttons
            JButton cancelButton = new JButton("Cancel");
            final JButton setButton = new JButton("Set");
            cancelButton.addActionListener(new ActionListener() {
                public void actionPerformed(ActionEvent e) {
                    ListDialog.dialog.setVisible(false);
            setButton.addActionListener(new ActionListener() {
                public void actionPerformed(ActionEvent e) {
                    ListDialog.value = (String) (list.getSelectedValue());
                    ListDialog.dialog.setVisible(false);
            getRootPane().setDefaultButton(setButton);
    //main part of the dialog
            list = new JList(data);
            list.setSelectionMode(ListSelectionModel.SINGLE_INTERVAL_SELECTION);
            list.addMouseListener(new MouseAdapter() {
                public void mouseClicked(MouseEvent e) {
                    if (e.getClickCount() == 2) {
                        setButton.doClick();
            JScrollPane listScroller = new JScrollPane(list);
            listScroller.setPreferredSize(new Dimension(250, 80));
    //XXX: Must do the following, too, or else the scroller thinks
    //XXX: it's taller than it is:
            listScroller.setMinimumSize(new Dimension(250, 80));
            listScroller.setAlignmentX(LEFT_ALIGNMENT);
    //Create a container so that we can add a title around
    //the scroll pane. Can't add a title directly to the
    //scroll pane because its background would be white.
    //Lay out the label and scroll pane from top to button.
            JPanel listPane = new JPanel();
            listPane.setLayout(new BoxLayout(listPane, BoxLayout.Y_AXIS));
            JLabel label = new JLabel(labelText);
            label.setLabelFor(list);
            listPane.add(label);
            listPane.add(Box.createRigidArea(new Dimension(0, 5)));
            listPane.add(listScroller);
            listPane.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));
    //Lay out the buttons from left to right.
            JPanel buttonPane = new JPanel();
            buttonPane.setLayout(new BoxLayout(buttonPane, BoxLayout.X_AXIS));
            buttonPane.setBorder(BorderFactory.createEmptyBorder(0, 10, 10, 10));
            buttonPane.add(Box.createHorizontalGlue());
            buttonPane.add(cancelButton);
            buttonPane.add(Box.createRigidArea(new Dimension(10, 0)));
            buttonPane.add(setButton);
    //Put everything together, using the content pane's BorderLayout.
            Container contentPane = getContentPane();
            contentPane.add(listPane, BorderLayout.CENTER);
            contentPane.add(buttonPane, BorderLayout.SOUTH);
            pack();
        public void mouseClicked(MouseEvent e) {
            System.out.println("Mouse Click");
        public void mousePressed(MouseEvent e) {
            throw new UnsupportedOperationException("Not supported yet.");
        public void mouseReleased(MouseEvent e) {
            throw new UnsupportedOperationException("Not supported yet.");
        public void mouseEntered(MouseEvent e) {
            throw new UnsupportedOperationException("Not supported yet.");
        public void mouseExited(MouseEvent e) {
            throw new UnsupportedOperationException("Not supported yet.");
        public void mouseDragged(MouseEvent e) {
            throw new UnsupportedOperationException("Not supported yet.");
        public void mouseMoved(MouseEvent e) {
            throw new UnsupportedOperationException("Not supported yet.");
         * This is here so that you can view ListDialog even if you
         * haven't written the code to include it in a program.
    }

  • 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

  • How to print jTable with custom header and footer....

    Hello all,
    I'm trying to print a jTable with custom header and footer.But
    jTable1.print(PrintMode,headerFormat,footerFormat,showPrintDialog,attr,interactive)
    does not allow multi line header and footer. I read in a chat that we can make custom header and footer and wrap the printable with that of the jTable. How can we do that..
    Here's the instruction on the chat...
    Shannon Hickey: While the default Header and Footer support in the JTable printing won't do exactly what you're looking for, there is a straight-forward approach. You can turn off the default header/footer and then wrap JTable's printable inside another Printable. This wrapper printable would then render your custom data, and then adjust the size given to the wrapped printable
    But how can i wrap the jTable's Printable with the custom header and footer.
    Thanks in advance,

    I also once hoped for an easy way to modify a table's header and footer, but found no way.
    Yet it is possible.

  • How to create a table with datatype blob and insert a pdf file (ravi)

    how to create a table with datatype blob and insert a pdf file,
    give me the explain asap
    1.create the table?
    2.insert the pdffiles into tables?
    3.how to view the files?
    Thanks & Regards
    ravikumar.k
    Edited by: 895044 on Dec 5, 2011 2:55 AM

    895044 wrote:
    how to create a table with datatype blob and insert a pdf file,
    give me the explain asapPerhaps you should read...
    {message:id=9360002}
    especially point 2.
    We're not just sitting here waiting to answer your question as quickly as possible for you.

  • My iphone 4 after update ios wont turn on and stuck in restore with apple logo and loading bar not move

    When I update the ios on my Iphone 4 it wont turn on and I tried to restore it, but it stuck in restore with apple logo and loading bar not move at all, I contact apple support and they tried to help me but nothing work, then they told me to send it to replace it and I need to pay $149, that's mean if anybody has any problem with his iphone even the problem from apple software you need to pay, that's not fair at all.... I will try to sale all our apple device and by Samsung device to resolve this problems.

    I believe this means that it is bricked, just sell it for parts, to someone like me

  • I get a white screen with apple logo and progress bar on my imac mavericks

    I get a white screen with apple logo and progress bar ,then computer shuts down
    when I turn my imac back on same thing happens,every time same thing
    pprogress bar only goes half way then computer shut down
    is there a solution ?
    if not is there a way to at least salvage some files and docs?
    i Have the latest imac 27

    Thanks I tried it but after I repaired my disk via disk utility at start up, it told me that
    my disk can't be repaired and to try to back up my files so I can format it
    but is there to back up my files?
    also what I get is white screen with the progress bar not grey

  • Problem creating a table with a subquery and a dblink

    Hello!!
    I have a little problem. When I create a table with a subquery and a dblink, for example:
    CREATE TABLE EXAMPLE2 AS SELECT * FROM EXAMPLE1@DBLINK
    the table definition is changed. Fields with a type of CHAR or VARCHAR2 are created with a size three times bigger than the original table in the remote database. Field of type DATE and NUMBER are not changed. For example if the original table, in the database 1, has a field of type CHAR(1) it is create in the local database with a type of CHAR(3), and a VARCHAR2(5) field is created with VARCHAR2(15).
    Database 1 has a WE8DEC character set.
    Database 2 has a AL32UTF8 character set.
    Could it be related to the difference in character sets?
    What can I do to make Oracle use the same table definition when creating a table in this way?
    Thanks!!

    That is related to character sets, and probably necessary if you want all the data in the remote table to be able to fit in the new table.
    When you declare a column VARCHAR2(5), by default, you're allocating 5 bytes of storage. In a single-byte character set, which I believe WE8DEC is, that also happens to equate to 5 characters. In a multi-byte character set like AL32UTF8, though, 1 character may require up to 3 bytes of storage, so you'd need to allocate 15 bytes to store that data. That's what's going on here.
    You could still store all the data if you create the table locally by explicitly requesting 5 characters of storage by declaring the column VARCHAR2(5 CHAR). You could also set the NLS_LENGTH_SEMANTICS parameter to CHAR rather than BYTE before creating the table, but I believe that both of these will only apply when you're explicitly defining columns as part of your CREATE TABLE. I don't believe either will apply to CTAS statements.
    Justin

Maybe you are looking for