zoukankan      html  css  js  c++  java
  • 用DIV画个漂亮的Table,根本看不出是div画的

    用到的CSS设定

    .tableRow {
    1200px;
    height: 50px;
    }

    .Cell {
    float: left;
    198px;
    height: 50px;
    border- 1px 0px 0px 1px;
    border-style: solid;
    }

    .CellRowEnd {
    float: left;
    150px;
    height: 50px;
    border- 1px 1px 0px 1px;
    border-style: solid;
    }

    .CellLastRow {
    float: left;
    198px;
    height: 50px;
    border- 1px 0px 1px 1px;
    border-style: solid;
    }

    .CellLastRowEnd {
    float: left;
    150px;
    height: 50px;
    border- 1px 1px 1px 1px;
    border-style: solid;
    }

    下面是画table的代码

    <div class="tableRow clearfix panel-heading"
    data-toggle="collapse" data-parent="#accordion"
    href="#collapseOne">
    <div class="Cell"></div>
    <div class="Cell"></div>
    <div class="Cell"></div>
    <div class="Cell"></div>
    <div class="Cell"></div>
    <div class="CellRowEnd"></div>
    </div>
    <div id="collapseOne"
    class="col-xs-12 panel-collapse collapse collapseCom"></div>

    <div class="tableRow clearfix panel-heading"
    data-toggle="collapse" data-parent="#accordion"
    href="#collapseTwo">
    <div class="Cell"></div>
    <div class="Cell"></div>
    <div class="Cell"></div>
    <div class="Cell"></div>
    <div class="Cell"></div>
    <div class="CellRowEnd"></div>
    </div>
    <div id="collapseTwo"
    class="col-xs-12 panel-collapse collapse collapseCom"></div>

    <div class="tableRow clearfix panel-heading"
    data-toggle="collapse" data-parent="#accordion"
    href="#collapseThree">
    <div class="Cell"></div>
    <div class="Cell"></div>
    <div class="Cell"></div>
    <div class="Cell"></div>
    <div class="Cell"></div>
    <div class="CellRowEnd"></div>
    </div>
    <div id="collapseThree"
    class="col-xs-12 panel-collapse collapse collapseCom"></div>

    <div class="tableRow clearfix panel-heading"
    data-toggle="collapse" data-parent="#accordion"
    href="#collapseFour">
    <div class="CellLastRow"></div>
    <div class="CellLastRow"></div>
    <div class="CellLastRow"></div>
    <div class="CellLastRow"></div>
    <div class="CellLastRow"></div>
    <div class="CellLastRowEnd"></div>
    </div>

  • 相关阅读:
    C#操作ini配置文件和写入日志操作
    asp.net AJAX 定期刷新页面,然后,在 Timer 的事件中弹出窗口
    setInterval和setTimeout的区别
    检测远程URL是否存在
    SharePoint列表的模板类型中的BaseType参数和ListTemplate参数
    TCP中的Flag options
    jQuery基础教程摘录 Hello world
    SharePoint站点无法打开的问题
    SPQuery在引用field的时候要用internal name
    Windows Server 2008中用管理员的权限使用命令行来打开程序
  • 原文地址:https://www.cnblogs.com/weijieyun/p/6053295.html
Copyright © 2011-2022 走看看