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