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>
    
  • 相关阅读:
    hdu1874 畅通工程续
    hdu2544 最短路
    hdu1068 Girls and Boys
    hdu1151 Air Raid
    hdu1150 Machine Schedule
    hdu2063 过山车
    Bootstrap 学习笔记12 轮播插件
    Bootstrap 学习笔记11 按钮和折叠插件
    Bootstrap 学习笔记10 弹出框和警告框插件
    Bootstrap 学习笔记9 标签页和工具提示插件
  • 原文地址:https://www.cnblogs.com/q2546/p/9360954.html
Copyright © 2011-2022 走看看