css如何设置表格样式

这篇文章主要为大家展示了“css如何设置表格样式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css如何设置表格样式”这篇文章吧。

成都创新互联公司基于分布式IDC数据中心构建的平台为众多户提供服务器托管 四川大带宽租用 成都机柜租用 成都服务器租用。

1、一个简单的表格

table.html

表格样式

课程表

星期\课程

星期一

星期二

星期三

星期四

星期五

1-2节

数学

语文

化学

英语

英语

3-4节

英语

物理

化学

英语

体育

5-6节

数学

物理

体育

化学

美术

7-8节

数学

美术

化学

英语

体育

9-10节

生物

美术

生物

英语

物理

table.css

table,td,th{

border:1pxsolid#aaa;

font-size:23px;

}

2、边框合并:boder-collapse

属性值:

separate;(分开,默认)

collapse;(合并)

table.css

table,td,th{

border:1pxsolid#aaa;

font-size:23px;

border-collapse:collapse;

}

3、边框间距border-spacing(前提是:border-collapse:separate;)

table.css

table,td,th{

border:1pxsolid#aaa;

font-size:23px;

border-collapse:separate;

border-spacing:45px;

}

4、设置表格标题的位置caption-side

属性值:

top;//默认

bottom;

left;

right;

table.css

table,td,th{

border:1pxsolid#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:1pxsolid#aaa;

font-size:23px;

border-collapse:separate;

border-spacing:5px;

table-layout:fixed;

caption-side:top;

}

css如何设置表格样式css如何设置表格样式

以上是“css如何设置表格样式”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


标题名称:css如何设置表格样式
网页链接:http://ybzwz.com/article/geegoc.html