前端基礎---長表格
阿新 • • 發佈：2021-07-02
有一些情況下表格是非常的長的，
這時就需要將表格分為三個部分，表頭，表格的主體，表格底部
在HTML中為我們提供了三個標籤：
thead表頭
tbody表格主體
tfoot表格底部
這三個標籤的作用，就來區分表格的不同的部分，他們都是table的子標籤，
都需要直接寫到table中，tr需要寫在這些標籤當中
thead中的內容，永遠會顯示在表格的頭部
tfoot中的內容，永遠都會顯示錶格的底部
tbody中的內容，永遠都會顯示錶格的中間
如果表格中沒有寫tbody，瀏覽器會自動在表格中新增tbody
並且將所有的tr都放到tbody中，所以注意tr並不是table的子元素，而是tbody的子元素
通過table>tr無法選中行需要通過tbody>tr
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{ margin: 20px auto; border: 1px solid black; border-collapse: collapse; width: 200px; } th{ background-color: yellow; border: 1px solid black; } td{ border: 1px solid black; } tbody tr:nth-child(even){ background-color: yellowgreen; } tbody tr:hover{ background-color: red; } tfoot tr{ background-color: skyblue; } </style> </head> <body> <table> <thead> <th>時間</th> <th>收入</th> <th>支出</th> <th>合計</th> </thead> <tfoot> <tr> <td></td> <td></td> <td>總計</td> <td>200</td> </tr> </tfoot> <tbody> <tr> <td>20.4</td> <td>500</td> <td>300</td> <td>200</td> </tr> <tr> <td>20.4</td> <td>500</td> <td>300</td> <td>200</td> </tr> <tr> <td>20.4</td> <td>500</td> <td>300</td> <td>200</td> </tr> <tr> <td>20.4</td> <td>500</td> <td>300</td> <td>200</td> </tr> <tr> <td>20.4</td> <td>500</td> <td>300</td> <td>200</td> </tr> </tbody> </table> </body> </html>