专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

表格高级(表格相关css属性)(表格重要html属性)、样式重置

作者:鹏仔先生日期:2020-06-02浏览:365分类:CSS


表格相关css属性

1.合并相邻单元格边框(给table加)

    语法:

border-collapse: collapse(合并相邻单元格边框)  |  separate(相邻单元格边框分开);


2.设置表格标题的位置(给table加)

    语法:

caption-side: top  |  bottom  |  left  |  right;

    注:left和right只有火狐识别


3.设置单元格之间的间距(给table加)

    语法:

border-spacing: 数值+单位;

    注:当出现border-collapse: collapse; 时,border-spacing 会失效;样式中的border-spacing 属性会覆盖掉标签中的cellspacing属性。


4.无内容单元格显示或隐藏(给table加)

    语法:

empty-cells: show(显示)  |  hide(隐藏);


5.表格布局算法(给table加)

    语法:

table-layout: auto(默认值)  |  fixed(单元格宽度固定,不跟随内容多少改变单元格宽度);


表格重要html属性

1.合并行

rowspan="数值"

2.合并列

colspan="数值"

3.设置单元格内容垂直对齐方式

valign="top  |  cols  |  all  |  groups  |  none"

4.设置单元格内容水平对齐方式

align="left  |  right  |  center"

5.

rules="rows  |  cols  |  all  |  groups  |  none"

    row:行分隔线

    cols:列分隔线

    all:位于行和列之间的分隔线

    groups:行组和列组分隔线

    none:不添加任何分隔线

    注:表格行分组   thead、tbody、tfoot

    表格列分组:

<colgroup span="1"></colgroup>

    注:span用来设置几列为一组,默认为1



样式重置

    概念:将一些多次需要使用到的css属性写在公共样式中,或统一各个浏览器的一些样式就叫做样式重置

    作用:让各个浏览器的css样式有一个统一的基准,有利于代码的优化


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

请填写验证码

关灯