zoukankan      html  css  js  c++  java
  • css 表格

    1.给元素的display属性添加为以下值

    table : <table>

    table-caption :<caption>

    table-cell : <td>

    table-row :<tr>

    table-row-group :<tbody>

    table-column : <col>

    table-column-group :<colgroup>

    table-header-group : <thead>

    table-footer-group : <tfoot>

    2.实现简单的三列布局

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
        <title>css html</title>
    <style type="text/css">
        .container {
        display: table;
        }
        .row {
        display: table-row;
        }
    
        .cell {
        display: table-cell;
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        padding: 1em;
        }
    </style>
    </head>
    <body>
    
    <div class="container">
        <div class="row">
            <div class="cell">CELL A</div>
            <div class="cell">CELL B</div>
            <div class="cell">CELL C</div>
        </div>
    </div>
    
    
    </body>
    </html>

    3.如果我们为元素使用“display:table-cell;”属性,而不将其父容器设置为“display:table-row;”属性,浏览器会默认创建出一个表格行,就好像文档中真的存在一个被声明的表格行一样

      即以下部分可以省略

    <div class=”container”>
    <div class=”row”>

    .container {
    display: table;
    }

    .row {
    display: table-row;
    }

    4.其他有用的属性

    table-layout 将table-layout属性设置为fixed可以让浏览器按照固定算法来渲染单元格的宽度。

    Border-collapse 定义边框

    Border-spacing 声明“border-collapse:separate;”后,可用border-spacing属性来定义相邻两个单元格边框间的距离。

  • 相关阅读:
    ES6中map数据结构学习
    React中,input外边如果包一个div,可以把input的onChange事件绑定到div上面,并且也生效
    筛数组
    字符串slice、substring、substr
    DVA-subscriptions
    react hooks学习
    React会自动把虚拟DOM数组展开
    React+Redux+Dva学习
    [转] 关于卫星轨道的科普
    边缘计算在智慧城市中的应用【摘录】
  • 原文地址:https://www.cnblogs.com/syyy/p/5882669.html
Copyright © 2011-2022 走看看