首页 > 代码库 > css 表格

css 表格

2024-08-13 19:42:40   213人阅读

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

table使该元素按table样式渲染

table-row使该元素按tr样式渲染

table-cell使该元素按td样式渲染

table-row-group使该元素按tbody样式渲染

table-header-group使该元素按thead样式渲染

table-footer-group使该元素按tfoot样式渲染

table-caption使该元素按caption样式渲染

table-column使该元素按col样式渲染

table-column-group使该元素按colgroup样式渲染

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属性来定义相邻两个单元格边框间的距离。

css 表格


联系
我们