css设置表格样式的方法

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

创新互联公司是一家专注于成都网站制作、成都网站设计与策划设计,宜章网站建设哪家好?创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:宜章等地区。宜章做网站价格咨询:18982081108

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://myzitong.com/article/ppogsc.html

css设置表格样式的方法

其他资讯