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>
    
  • 相关阅读:
    Vue.js + Flask + echarts + MySQL
    一次挖矿处理
    Docker三剑客之Docker Swarm
    Malleable-C2-Profiles配置
    「持续更新中」最近浏览的网站心得总结
    有关虚拟内存的一点思考
    Qt---ToolBox自由伸展
    mindmaster导出markdown文档
    svg代码嵌入秀米的方法
    css3渐变透明度的写法
  • 原文地址:https://www.cnblogs.com/q2546/p/9360954.html
Copyright © 2011-2022 走看看