百变鹏仔-专注前端行业精选
表格高级(表格相关css属性)(表格重要html属性)、样式重置
作者:鹏仔先生日期:2020-06-02 15:06:45浏览:1756分类: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样式有一个统一的基准,有利于代码的优化
手机扫码访问
猜你还喜欢
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 01-19 elementui多选上传 before-upload 格式效验错误总会触发before-remove (elementui多选上传on-success只执行了一次,只上传成功了一条)
- 10-08 vue按钮限制连点封装 自定义指令限制连点
- 12-28 PHP的语法
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论,来添加一个吧。