平武建站

css设置表格样式的方法-创新互联

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

创新互联专注于企业全网整合营销推广、网站重做改版、扎兰屯网站定制设计、自适应品牌网站建设、H5响应式网站、商城网站制作、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为扎兰屯等各大城市提供网站开发制作服务。

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://pwwzsj.com/article/dosess.html

其他资讯