这篇文章主要为大家展示了“CSS如何设置表格样式”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css如何设置表格样式”这篇文章吧。 1、一个简单的表格
这篇文章主要为大家展示了“CSS如何设置表格样式”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css如何设置表格样式”这篇文章吧。
1、一个简单的表格
table.html
<!doctypehtml><html><head>
<metacharset="utf-8">
<title>表格样式</title>
<linkhref="box.css"type="text/css"rel="stylesheet"></head><body>
<center>
<tableclass="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:1pxsolid#aaa;
font-size:23px;
}
2、边框合并：boder-collapse
属性值：
separate;（分开，默认）
collapse;（合并）
table.css
table,td,th{
border:1pxsolid#aaa;
font-size:23px;
border-collapse:collapse;
}
3、边框间距border-spacing(前提是：border-collapse:separate;)
table.css
table,td,th{
border:1pxsolid#aaa;
font-size:23px;
border-collapse:separate;
border-spacing:45px;
}
4、设置表格标题的位置caption-side
属性值：
top;//默认
bottom;
left;
right;
table.css
table,td,th{
border:1pxsolid#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:1pxsolid#aaa;
font-size:23px;
border-collapse:separate;
border-spacing:5px;
table-layout:fixed;
caption-side:top;
}
以上是“css如何设置表格样式”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网node.js频道！
--结束END--
本文标题: css如何设置表格样式
本文链接: https://www.lsjlt.com/news/89341.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0