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

Posted tianxiaxuange

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了__x__(41)0909第五天__长表格相关的知识，希望对你有一定的参考价值。

长表格

银行流水，表格很长。。。

则需要将表格分为 表头 thead ，主体数据 tbody ， 表格底部 tfoot

三个标签无顺序要求，易于维护：thead → tfoot → tbody

 

如果没写 tbody ，浏览器会自添加 tbody，并将所有的 tr 移入 tbody

好处：

可以分别设置样式。

打印时，利用分类处理多页表头，表尾的效果。

无顺序要求，已维护。

 

 

效果图：

技术分享图片

 

 

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>

 

 

 

 

 

以上是关于__x__(41)0909第五天__长表格的主要内容，如果未能解决你的问题，请参考以下文章

__x__(37)0909第五天__背景图按钮

__x__(30)0908第五天__导航条的练习

__x__(35)0908第五天__ 层级 z-index

__x__(36)0908第五天__背景 background

__x__(34)0908第五天__ 定位 position

__x__(29)0908第五天__高度塌陷 问题