一个简单的表格有时会感觉很单调，那么怎么给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控制表格样式_html/css_WEB-ITnose
精通CSS+DIV网页样式与布局设置表单和表格_html/css_WEB-ITnose
Css基本样式表格的详细介绍
以上就是css怎么设置表格样式？css设置表格样式的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611204.html
微信扫一扫 
支付宝扫一扫 
