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;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样

　　即以下部分可以省略

.container {
display: table;
}

.row {
display: table-row;
}

4.其他有用的属性

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

Border-collapse 定义边框

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

posted @ 2016-09-18 18:45 farmerspring 阅读(130) 评论(0) 编辑收藏举报

farmerspring

css 表格

公告