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>

  • 相关阅读:
    教你透彻了解红黑树(转)
    算法描述伪代码
    B 树、B+ 树、B* 树
    Java四种引用类型
    Java程序以后台方式在Linux上运行(nohup命令)
    java 文档注释
    Reactor模式和NIO
    Immutable模式与string类的实现
    mina 入门
    索引和优化查询
  • 原文地址:https://www.cnblogs.com/weijieyun/p/6053295.html
Copyright © 2011-2022 走看看