您的位置：首页 > Web前端 > CSS

css写表格 table的高级属性

2017-09-19 14:33 507 查看

作用：显示数据

（一）关于表格的css属性

1、单元格间距（该属性必须给table添加）

border-spacing:value;

2、合并相邻单元格边框

border-collapse:separate（边框分开）/collapse（边框合并）

3、无内容单元格显示、隐藏

empty-cells：show（显示）/hide（隐藏）

4、表格布局算法（加快运行的速度）

table-layout:auto/fixed（固定宽度，不会随内容多少改变单元格宽度）

必须在table上写这个不然单元格的宽度会随内容变多而撑大

在表格中即使给td宽度单元格的大小也会因为它内容增多而撑大

在html中全部写英文浏览器会默认这全部是一个英文单词

5、表格标题

<caption>标题内容</caption>

表格标题位置：caption-side:top/right/bottom/left

说明：left,right,top,bottom位置只有火狐识别，top,bottom IE7以上版本支持，IE7及以下版本不支持其他属性值，只识别top

6、表格布局元素

表格基本组成

table（表格） tr
4000
（行） td（列）

th 表格列标题（放在tr里）

给表单写边框注意细节

在表格里面 tr单独给边框 table和td不给边框表格是不会显示出边框的如下写就可以在tr里写边框

tr{border: 1px solid #d6d6d6;}

table{border-collapse:collapse;}

效果如下

在表格里空的单元格必须用；代替不然就会出现bug

html里tabled的重要属性

1）

colspan="所要合并的单元格的列数" 横向合并

rowspan="所要合并的单元格的行数" 纵向合并

2）水平对齐方式：align="left/center/right"；

3）垂直对齐方式：valign="top/middle/bottom"；

4）rules="rows/cols/all/none/groups"添加分隔线

说明：

rows：位于行之间的线条

cols：位于列之间的线条

all：位于行和列之间的线条

none：没有线条

groups：位于行组和列组之间的线条

2、数据行分组

<thead></thead> 表头

<tbody></tbody> 表体

<tfoot></tfoot> 表尾

说明：一个table中，只能包含一个thead，一个tfoot，但可包含多个tbody。

3、数据列分组

<colgroup span="value"></colgroup>

<col span="value"/>

说明：

1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行列分组

2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组

3）可以通过给table添加rules="groups"属性来给分组列添加组分割线

注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来决定表格内容部分割线（rules）应该处于的位置，而col没有这个功能

4、css伪类选择器：

nth-child()：nth-child(5)选择器匹配属于其父元素的第N个子元素，不论元素的类型。

odd 奇数 even 偶数

IE8不识别

ie浏览器的识别方法

eg：tbody tr:nth-child(odd){background:#fef0f5;} tbody下的行数为奇数的行

可以看下 nth-child（）选择器的效果案例直接复制

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
li{list-style: none;}
/*first-child在ＩＥ８是可以支持的，下面的均不支持*/
.list li:first-child{color: red;}
.list li:nth-child(even){background-color: #ff0;}
.list li:nth-child(odd){background-color: #f0f;}
.list li:last-child{font-size: 50px;}
.a h2:nth-child(2){color: red;}
</style>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie8.css">
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<![endif] -->
<!-- （解决ie浏览器的兼容问题  在ie9的情况下 使用此引入就可以在ie9中使用此标签） -->
</head>
<body>
<!-- nth-child  在IE8及以下不支持 -->
<ul class="list">
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
<li>aaaaaaa</li>
</ul>
<div class="a">
<h1>h1</h1>
<h2>h2</h2>
<p>ppppppppp</p>
<h2>h2</h2>
<p>pppppppp</p>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航