x(41)0909第五天__長表格

時間 2019-11-08

標籤第五表格简体版

原文原文鏈接

長表格css

銀行流水，表格很長。。。html

則須要將表格分爲 表頭 thead ，主體數據 tbody ， 表格底部 tfoot瀏覽器

三個標籤無順序要求，易於維護：thead → tfoot → tbodyspa

若是沒寫 tbody ，瀏覽器會自添加 tbody，並將全部的 tr 移入 tbodycode

好處：htm

能夠分別設置樣式。blog

打印時，利用分類處理多頁表頭，表尾的效果。utf-8

無順序要求，已維護。ci

效果圖：it

css代碼：

@charset "utf-8";

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: #3e4e54;
}

table{
    margin: 0px auto;
    width: 40%;
    
    /* 單元格之間的距離。*/
    border-spacing: 0px;
    
    /* 表格的邊框合併。設置之後 border-spacing 自動失效*/
    border-collapse: collapse;
}

#mytb th,td{
    border: 1px red solid;
}

/* 隔行變色 IE8 及如下不支持 :nth-child() */
tr:nth-child(even){
    background-color: #666;
}

/* 懸浮變色 IE6及如下不支持 a 之外的元素使用 :hover */
tr:hover{
    background-color: #bfc;
}

html代碼：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表格</title>
        
        <link rel="stylesheet" type="text/css" href="css/longtable.css" />
    </head>

    <body>
        Hello Web!`    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        table 是<b>塊元素</b>，獨佔一行
        
        <table id="mytb">
            <thead>
                <th>姓名</th>
                <th>年齡</th>
                <th>性別</th>
                <th>性別</th>
            </thead>
            
            <tfoot>
                <tr>
                    <td></td>
                    <td>共</td>
                    <td>12</td>
                    <td>人</td>
                </tr>
            </tfoot>
            
            <tbody>
                <tr>
                    <td>劉備</td>
                    <td>35</td>
                    <td>男</td>
                    <td>男</td>
                </tr>
                
                <tr>
                    <td>關羽</td>
                    <td>33</td>
                    <td>男</td>
                    <td>男</td>
                </tr>
                
                <tr>
                    <td>張飛</td>
                    <td>30</td>
                    <td>男</td>
                    <td>男</td>
                </tr>
                
                <tr>
                    <td>唐僧</td>
                    <td>27</td>
                    <td>男</td>
                    <td>男</td>
                </tr>
                
                <tr>
                    <td>孫悟空</td>
                    <td>633</td>
                    <td>男</td>
                    <td>男</td>
                </tr>
                
                <tr>
                    <td>豬八戒</td>
                    <td>830</td>
                    <td>男</td>
                    <td>男</td>
                </tr>
                
                <tr>
                    <td>沙悟淨</td>
                    <td>735</td>
                    <td>男</td>
                    <td>男</td>
                </tr>
                
                <tr>
                    <td>白龍馬</td>
                    <td>533</td>
                    <td>男</td>
                    <td>男</td>
                </tr>
                
                <tr>
                    <td>白骨精</td>
                    <td>130</td>
                    <td>女</td>
                    <td>女</td>
                </tr>
                
                <tr>
                    <td>蜘蛛精</td>
                    <td>135</td>
                    <td>女</td>
                    <td>女</td>
                </tr>
                
                <tr>
                    <td>金角大王</td>
                    <td>430</td>
                    <td>男</td>
                    <td>男</td>
                </tr>
                
                <tr>
                    <td>東海龍王</td>
                    <td>3000</td>
                    <td>男</td>
                    <td>男</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

1. __x__(39)0909第五天__ 表格 table
2. leetcode的第五天最長迴文串
3. __x__(40)0909第五天__表格 table 的 css 樣式美化
4. Oracle(第五天)
5. 第五天
6. HCIE第五天
7. vue第五天
8. 第四+五天
9. linux 第五天
10. MySQL 第五天
更多相關文章...
• jQuery Mobile 表格 - jQuery Mobile 教程
• Markdown 表格 - Markdown 教程
• RxJava操作符（五）Error Handling
• Git五分鐘教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

__x__(41)0909第五天__長表格

x(41)0909第五天__長表格