HTML / CSS技巧 – 可滚动的 tbody（漂亮表格）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML / CSS技巧 – 可滚动的 tbody（漂亮表格）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Book List</title> <style type="text/css"> .bigdiv{overflow:hidden;width:100%;height:100%;} table { background-color: #FFF; border: none; color: #565; font: 12px arial; overflow-y: scroll;overflow-x: hidden; width:110%; } table caption { font-size: 24px; border-bottom: 2px solid #B3DE94; border-top: 2px solid #B3DE94; width:79%; } table, td, th { margin: 0; padding: 0; vertical-align: middle; text-align:left; } tbody{ display:block; height:295px; overflow-y:scroll; } tbody tr { display:table; width:80%; table-layout:fixed; } table thead { display:table; width:79.15%; table-layout:fixed; } table thead th{ color:#FFFFFF;} tbody td, tbody th { background-color: #DFC; border-bottom: 2px solid #B3DE94; border-top: 3px solid #FFFFFF; padding: 9px; } tfoot td, tfoot th { font-weight: bold; padding: 4px 8px 6px 9px; text-align:center; } thead th { font-size: 14px; font-weight: bold; line-height: 24px; padding: 0 8px 2px; text-align:center; } tbody tr.odd th,tbody tr.odd td { /*odd就是偶数行*/ background-color: #CEA; border-bottom: 2px solid #67BD2A; text-align:center; } td+td+td, /*第三个td以及之后的td元素*/ col.price{ /*类样式*/ text-align:center; } tbody tr:hover td, tbody tr:hover th { /*tr也有hover样式*/ background-color: #8b7; color:#fff; } </style> </head> <body> <div class="bigdiv"> <table summary="book list"> <caption>Book List</caption> <!-- caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 --> <col></col><col></col><col></col><col class="price" align="right"></col> <thead> <tr> <th bgcolor="#009999">Title</th> <th bgcolor="#00CC99">ID</th> <th bgcolor="#660066">Country</th> <th bgcolor="#CCCC33">Price</th> <th bgcolor="#FF0066">Download</th> </tr> </thead> <tbody> <tr class="odd"> <td >Tom</td> <td>1213456</td> <td>Germany</td> <td>$3.12</td> <td>Download</td> </tr> <tr class="odd"> <td >Chance</td> <td>1213457</td> <td>Germany</td> <td>$123.34</td> <td>Download</td> </tr> <tr class="odd"> <td >John</td> <td>1213458</td> <td>Germany</td> <td>$34.37</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> <tr class="odd"> <td>oKathleen</td> <td>1213459</td> <td>Germany</td> <td>$23.67</td> <td>Download</td> </tr> </tbody> </table> </div> </body> </html>
以上是关于HTML / CSS技巧 – 可滚动的 tbody（漂亮表格）的主要内容，如果未能解决你的问题，请参考以下文章
求教高手，如何使用css控制表格主体(tbody)部分超出指定高度之后显示滚动条？