zoukankan      html  css  js  c++  java
  • 长表单

    有三种元素有助于区分表格的主体内容,第一行和最后一行。

    <!DOCTYPE html>
    <!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
    -->
    <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                thead tr th{
                    border-bottom: 1px solid black;
                }
                
                tfoot tr td{
                    border-top: 1px solid black;
                }
            </style>
        </head>
        <body>
            <div>TODO write content</div>
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Income</th>
                        <th>Expenditure</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <tr>
                        <th>1st January</th>
                        <td>250</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <th>2nd January</th>
                        <td>285</td>
                        <td>48</td>
                    </tr>
                    <!-- additional rows as above -->
                    <tr>
                        <th>31st January</th>
                        <td>129</td>
                        <td>64</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td></td>
                        <td>7824</td>
                        <td>1241</td>
                    </tr>
                </tfoot>
            </table>
        </body>
    </html>
    
  • 相关阅读:
    转 闭包简单理解
    mac 利用 sshpass 自动登录
    阮一峰 IaaS,PaaS,SaaS 的区别
    YMP运行初始化步骤
    强烈推荐 在线接口文档管理工具 小幺鸡 小团队可以省掉测试了
    springboot JSP 404
    并发测试 JavaDemo
    JS刷新当前页面的几种方法总结
    jquery checkbox勾选/取消勾选只能操作一次的诡异问题
    微信网页 第三方登录原理详解(转)
  • 原文地址:https://www.cnblogs.com/q2546/p/9360954.html
Copyright © 2011-2022 走看看