这篇文章主要介绍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设置表格样式的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。