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>

  • 相关阅读:
    HDOJ 1028 母函数分析
    尼姆博弈的典型例题
    HDOJ1232 畅通工程 DFS
    第一个八皇后
    HDOJ 1242
    我的“插入算法”实现
    第五讲 this 类变量 类方法
    我的“二分查找算法”实现
    我对锤子ROM 功能的看法——视觉篇
    第六讲 Java 四大特性:抽象 封装 继承 多态
  • 原文地址:https://www.cnblogs.com/weijieyun/p/6053295.html
Copyright © 2011-2022 走看看