zoukankan      html  css  js  c++  java
  • 表格使用总结

    细线表格:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>细线表格</title>
    <style type="text/css">
    table{
    border-collapse:collapse;
    }
    td{height:30px;50px;border-spacing:0px;border-collapse:collapse;}
    </style>
    </head>
    <body>

    <h4>这个表格没有边框:</h4>
    <table cellpadding=0; border=1; cellspacing=1;>
    <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    </tr>
    <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    </tr>
    </table>

    </body>
    </html>

     表格内容滚动,表头不滚动:

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <style type="text/css">
    .table{
    float:left;
    font-size:12px;
    300px;
    text-align:center;
    border:0px;
    border-spacing:0px;
    }
    .table:nth-child(2){float:right;}
    .table thead{display:table;100%;background:#666;}
    .table thead th{padding:7px 0px;}

    .table tbody {
    box-sizing:border-box;
    display: block;
    height: 100px;
    overflow: auto;
    100%;
    border:1px solid #666;
    }
    .table tbody tr{
    display:table;
    100%;
    }
    .table td{
    15%;
    }
    .table td:nth-child(2){
    40%;
    }
    .table tbody tr td{padding:7px 0px;}
    </style>
    </head>
    <body>
    <table class="table border-spacing:0px;border:0px;cell-spacing:0px;">
    <caption>标题</caption>
    <thead><tr><th>head1</th><th>head2</th><th>head3</th><th>head4</th><th>head5</th></tr></thead>
    <tbody>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    </tbody>
    </table>
    <table class="table border-spacing:0px;border:0px;cell-spacing:0px;">
    <caption>标题</caption>
    <thead><tr><th>head1</th><th>head2</th><th>head3</th><th>head4</th><th>head5</th></tr></thead>
    <tbody>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    </tbody>
    </table>
    </body>
    </html>

    效果如下:

    学而不思则罔,思而不结则殆,结而不看,一事无成
  • 相关阅读:
    Ubuntu深度学习环境搭建 tensorflow+pytorch
    FineReport调用存储过程
    简单实现固定表格的上表头、左表头
    为什么vertical-align不起作用
    纪录我的iOS学习之路
    【原】使用Bmob作为iOS后台开发心得——云端代码添加其他User的Relation关系
    【原】使用Bmob作为iOS后台开发心得——查询关联关系(BmobRelation)
    【译】Unity3D Shader 新手教程(6/6) —— 更好的卡通Shader
    【译】Unity3D Shader 新手教程(5/6) —— Bumped Diffuse Shader
    【译】Unity3D Shader 新手教程(4/6) —— 卡通shader(入门版)
  • 原文地址:https://www.cnblogs.com/windseek/p/6370861.html
Copyright © 2011-2022 走看看