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>

  • 相关阅读:
    转DataBinder.Eval总结
    ASP.NET环境下XML导出导入数据方法
    iOS开发中GCD在多线程方面的理解
    hdu 1678 优先队列
    hdu 1565 状态压缩DP
    hdu 1175 连连看
    hdu 1078 记忆化搜索
    hdu 1506
    hdu 1521 记忆化搜索
    三大博弈[转]
  • 原文地址:https://www.cnblogs.com/weijieyun/p/6053295.html
Copyright © 2011-2022 走看看