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>

  • 相关阅读:
    自考新教材-p173_3(1)
    自考新教材-p148_5(2)
    自考新教材-p148_5(1)
    自考新教材-p148_4
    自考新教材-p147_3
    自考新教材-p146_4(2)
    python 模块 chardet报错解决方法:下载及介绍
    第 52 讲:论一只爬虫的自我修养
    第 51 讲: _name_属性
    Python 培训第一讲
  • 原文地址:https://www.cnblogs.com/weijieyun/p/6053295.html
Copyright © 2011-2022 走看看