css设置表格样式的方法-创新互联
这篇文章主要介绍css设置表格样式的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

1、一个简单的表格
table.html
表格样式
课程表
星期\课程
星期一
星期二
星期三
星期四
星期五
1-2节
数学
语文
化学
英语
英语
3-4节
英语
物理
化学
英语
体育
5-6节
数学
物理
体育
化学
美术
7-8节
数学
美术
化学
英语
体育
9-10节
生物
美术
生物
英语
物理
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
}2、边框合并:boder-collapse
属性值:
separate;(分开,默认)
collapse;(合并)
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:collapse;
}3、边框间距border-spacing(前提是:border-collapse:separate;)
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 45px;
}4、设置表格标题的位置caption-side
属性值:
top;//默认
bottom;
left;
right;
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 45px;
caption-side:bottom;
}5、当单元格对象宽度超过单元格所定义的宽度时,可用table-layout:fixed保持表格宽度不被改变
属性值:auto(默认)
fixed(宽度固定)
table.css
table,td,th{
border:1px solid #aaa;
font-size: 23px;
border-collapse:separate;
border-spacing: 5px;
table-layout: fixed;
caption-side:top;
}以上是css设置表格样式的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道!
网站题目:css设置表格样式的方法-创新互联
网页网址:http://www.lzwzjz.cn/article/dosess.html


咨询
建站咨询
