<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Table滚动条 - - ≮不再等待≯ - - 专业IT工作者的业余空间</title> <mce:style type="text/css"><!-- body { font:12px/25px Arial; text-align:center; } .tableMain { width:600px; margin:50px auto 0; } .tableMain, .tableMain th { border-collapse:collapse; border:1px solid #000; } .scrollTable { height: 400px; overflow-x: hidden; overflow-y: auto; width: 100%; } .scrollTable .odd td { background:#ccc; border-bottom:1px solid #000; border-top:1px solid #000; } --></mce:style><style type="text/css" mce_bogus="1">body { font:12px/25px Arial; text-align:center; } .tableMain { width:600px; margin:50px auto 0; } .tableMain, .tableMain th { border-collapse:collapse; border:1px solid #000; } .scrollTable { height: 400px; overflow-x: hidden; overflow-y: auto; width: 100%; } .scrollTable .odd td { background:#ccc; border-bottom:1px solid #000; border-top:1px solid #000; }</style> </head> <body> <table class="tableMain" cellpadding="0" cellspacing="0"> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td colspan="3"><div class="scrollTable"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr class="odd"> <td>321321</td> <td>321321</td> <td>321321</td> </tr> <tr> <td>321321</td> <td>321321</td> <td>321321</td> </tr> </tbody> </table> </div></td> </tr> </table> </body> </html>