css设置表格样式的方法

发布时间:2020-09-24 11:20:25 作者:小新
来源:亿速云 阅读:181

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

1、一个简单的表格
table.html

<!doctype html><html><head>
    <meta charset="utf-8">
    <title>表格样式</title>
    <link href="box.css" type="text/css" rel="stylesheet"></head><body>
  <center>
  <table class="class">
      <caption>课程表</caption>
        <tr>
            <th>星期\课程</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
      </tr>
      <tr>
            <th>1-2节</th>
            <td>数学</td>
            <td>语文</td>
            <td>化学</td>
            <td>英语</td>
             <td>英语</td>
      </tr>

      <tr>
            <th>3-4节</th>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
            <td>英语</td>
             <td>体育</td>
      </tr>

      <tr>
            <th>5-6节</th>
            <td>数学</td>
            <td>物理</td>
            <td>体育</td>
            <td>化学</td>
            <td>美术</td>
      </tr>

      <tr>
            <th>7-8节</th>
            <td>数学</td>
            <td>美术</td>
            <td>化学</td>
            <td>英语</td>
            <td>体育</td>
      </tr>
      <tr>
            <th>9-10节</th>
            <td>生物</td>
            <td>美术</td>
            <td>生物</td>
            <td>英语</td>
            <td>物理</td>
      </tr>
    </table>
  </center>
  </body></html>

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设置表格样式的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. Css基本样式————表格
  2. HTML表格设置边框样式的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:Python的由来是什么

下一篇:css中text-decoration-line属性如何使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》