科技知识动态：css怎么设置表格样式？css设置表格样式的方法

2021-05-18 23:29:14

导读跟大家讲解下有关css怎么设置表格样式？css设置表格样式的方法，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说css怎么设置

跟大家讲解下有关css怎么设置表格样式？css设置表格样式的方法，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说css怎么设置表格样式？css设置表格样式的方法，小编也收集到了有关css怎么设置表格样式？css设置表格样式的方法的相关资料，希望大家看到了会喜欢。

一个简单的表格有时会感觉很单调，那么怎么给css表格加样式呢？本篇文章就给大家介绍关于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