急问JSP页面表头的固定问题。

我从数据库中获取到一系列的数据，有时因为数据很多，表有很多行，所有用到了滚动条。但是在拉动滚动条时不想让表头也跟着滚动。表头和表数据必须是同一张表。请问如何固定表头？

解决方案 »

  1.   

    不知道我这样能不能算放在一张表里，呵呵
    <html>
    <TABLE width="200" border="1" id="t1">
    <TR>
    <TD>s </TD>
    <TD>s </TD>
    </TR>
    <TR>
    <td colspan=2>
    <div style="height:50;overflow:auto;">
    <table width="100%"  border="1">
    <TR><TD> s</TD><TD> s</TD></TR>
    <TR><TD> d</TD><TD> s</TD></TR>
    <TR><TD>s </TD><TD> s</TD></TR>
    <TR><TD> d</TD><TD> s</TD></TR>
    <TR><TD> s</TD><TD> s</TD></TR>
    <TR><TD> d</TD><TD> s</TD></TR>
    <TR><TD> </TD><TD> s</TD></TR>
    </table>
    </div>
    </td>
    </TR>

    </TABLE>
    </html>
      

  2.   

    我遇到过这样的需求
    可以通过两个div来实现，一个div中包含的是表头内容的表格，另外一个div就是显示表数据，只要调整好两个div内table的列的位置对齐就可以了
      

  3.   

    各位高手：客户要求只能用一个表。而且不能使用框架。不过请问一下用2个DIV怎么实现。有没有具体代码？
      

  4.   

    试试这个
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
    <style type="text/css">
    <!--
    body {
     background: #FFF;
     color: #000;
     font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
     margin: 10px;
     padding: 0
    }
     
    table, td, a {
     color: #000;
     font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
    }
     
    .td
      {
     nowrap:'true';
      }
     
    div.tableContainer {
     clear: both;
     border: 1px solid #963;
     height: 285px;
     overflow: auto;
     width: 100%;
    }
     
    /* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */
    \html div.tableContainer/* */ {
     padding: 0 16px 0 0
    }
     
    /* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */
    html>body div.tableContainer {
     height: auto;
     padding: 0;
     width: 740px
    }
     
    /* Reset overflow value to hidden for all non-IE browsers. */
    /* Filter out Opera 5.x/6.x and MacIE 5.x                  */
    head:first-child+body div[class].tableContainer {
     height: 285px;
     overflow: hidden;
     width: 756px
    }
     
    /* define width of table. IE browsers only                 */
    /* if width is set to 100%, you can remove the width       */
    /* property from div.tableContainer and have the div scale */
    div.tableContainer table {
     float: left;
     width: 100%
    }
     
    /* WinIE 6.x needs to re-account for padding. Give it a negative margin */
    \html div.tableContainer table/* */ {
     margin: 0 -16px 0 0
    }
     
    /* define width of table. Opera 5.x/6.x and MacIE 5.x */
    html>body div.tableContainer table {
     float: none;
     margin: 0;
     width: 740px
    }
     
    /* define width of table. Add 16px to width for scrollbar.           */
    /* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
    head:first-child+body div[class].tableContainer table {
     width: 756px
    }
     
    /* set table header to a fixed position. WinIE 6.x only                                       */
    /* In WinIE 6.x, any element with a position property set to relative and is a child of       */
    /* an element that has an overflow property set, the relative value translates into fixed.    */
    /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
    thead.fixedHeader tr {
     position: relative;
     /* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution      */
     top: expression(document.getElementById("tableContainer").scrollTop)
    }
     /* set THEAD element to have block level attributes. All other non-IE browsers            */
    /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
    /* Filter out Opera 5.x/6.x and MacIE 5.x                                                 */
    head:first-child+body thead[class].fixedHeader tr {
     display: block
    }
     
    /* make the TH elements pretty */
    thead.fixedHeader th {
     background: #C96;
     border-left: 1px solid #EB8;
     border-right: 1px solid #B74;
     border-top: 1px solid #EB8;
     font-weight: normal;
     padding: 4px 3px;
     text-align: center
    }
     
    /* make the A elements pretty. makes for nice clickable headers                */
    thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
     color: #FFF;
     display: block;
     text-decoration: none;
     width: 100%
    }
     
    /* make the A elements pretty. makes for nice clickable headers                */
    /* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
    thead.fixedHeader a:hover {
     color: #FFF;
     display: block;
     text-decoration: underline;
     width: 100%
    }
     
    /* define the table content to be scrollable                                              */
    /* set TBODY element to have block level attributes. All other non-IE browsers            */
    /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
    /* induced side effect is that child TDs no longer accept width: auto                     */
    /* Filter out Opera 5.x/6.x and MacIE 5.x                                                 */
    head:first-child+body tbody[class].scrollContent {
     display: block;
     height: 262px;
     overflow: auto;
     width: 100%
    }
     
    /* make TD elements pretty. Provide alternating classes for striping the table */
    /* http://www.alistapart.com/articles/zebratables/                             */
    tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
     background: #FFF;
     border-bottom: 1px solid #EEE;
     border-left: 1px solid #EEE;
     border-right: 1px solid #AAA;
     border-top: 1px solid #AAA;
     padding: 2px 3px
    }
     
    tbody.scrollContent tr.alternateRow td {
     background: #EEE;
     border-bottom: 1px solid #EEE;
     border-left: 1px solid #EEE;
     border-right: 1px solid #AAA;
     border-top: 1px solid #AAA;
     padding: 2px 3px
    }
     
    /* define width of TH elements: 1st, 2nd, and 3rd respectively.      */
    /* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
    /* Add 16px to last TH for scrollbar padding                         */
    /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors    */
    head:first-child+body thead[class].fixedHeader th {
     width: 200px
    }
     
    head:first-child+body thead[class].fixedHeader th + th {
     width: 250px
    }
     
    head:first-child+body thead[class].fixedHeader th + th + th {
     border-right: none;
     padding: 4px 4px 4px 3px;
     width: 316px
    }
     
    /* define width of TH elements: 1st, 2nd, and 3rd respectively.      */
    /* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
    /* Add 16px to last TH for scrollbar padding                         */
    /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors    */
    head:first-child+body tbody[class].scrollContent td {
     width: 200px
    }
     
    head:first-child+body tbody[class].scrollContent td + td {
     width: 250px
    }
     
    head:first-child+body tbody[class].scrollContent td + td + td {
     border-right: none;
     padding: 2px 4px 2px 3px;
     width: 300px
     
    /* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */ 
    top: expression(document.getElementById("tableContainer").scrollTop)
    }
    -->
    </style>
    </head><body>
    <div id="tableContainer" class="tableContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
    <thead class="fixedHeader">
     <tr>
      <th><a href="#">Header 1</a></th>
      <th><a href="#">Header 2</a></th>
      <th><a href="#">Header 3</a></th>
      <th><a href="#">Header 4</a></th>
      <th><a href="#">Header 5</a></th>
      <th><a href="#">Header 6</a></th>
      <th><a href="#">Header 7</a></th>
     </tr>
    </thead>
    <tbody class="scrollContent">
     <tr>
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
      <td>Cell Content 4</td>
      <td>Cell Content 5</td>
      <td>Cell Content 6</td>
      <td>Cell Content 7</td>
     </tr>
     <tr>
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
      <td>More Cell Content 4</td>
      <td>More Cell Content 5</td>
      <td>More Cell Content 6</td>
      <td>More Cell Content 7</td>
     </tr>
     <tr>
      <td nowrap>Even More Cell Content 1</td>
      <td nowrap>Even More Cell Content 2</td>
      <td nowrap>Even More Cell Content 3</td>
      <td nowrap>Even More Cell Content 4</td>
      <td nowrap>Even More Cell Content 5</td>
      <td nowrap>Even More Cell Content 6</td>
      <td nowrap>Even More Cell Content 7</td>
     </tr>
     <tr>
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
      <td>And Repeat 4</td>
      <td>And Repeat 5</td>
      <td>And Repeat 6</td>
      <td>And Repeat 7</td>
     </tr>
    </tbody>
    </table>
    </div>
     
    </body></html>