DOCTYPEhtml><html><head><metacharset=”utf-8″><title>title>head><styletype=”text/css”>table{border-collapse:collapse;border:1pxsolid#00ffff;}tr:nth-child(n)td{width:300px;height:30px;background:#FFAA7F;}tr:nth-child(n)td:nth-child(1){border-right:1pxsolid#ffffff;}tr:nth-child(2n)td{background:#ffffff;width:200px;height:30px;}tr:nth-child(2n)td:nth-child(1){border-right:1pxsolid#FFAA7F;}style><body><section><table><scripttype=”text/javascript”>varrows=8,cols=2for(vari=0;i<rows;i++){
tab=”for(varj=0;j<cols;j++){varsid=(i*cols)+j
tab+=”+sid+’”onclick=”game(id)”>’}
tab+=”document.write(tab)
}script>table>section>body>html>
![图片[1]-css表格样式(怎样设置)-小白之家](https://caijiqi-1251775600.file.myqcloud.com/jianshu/2022/04/529543836020181768.jpg)
,css表格样式怎样设置,1、一个简单的表格
table.html
表格款式
课程表
星期\课程
星期一
星期二
星期三
星期四
星期五
1-2节
数学
语文
化学
英语
英语
3-4节
英语
物理
化学
英语
体育
5-6节
数学
物理
体育
化学
美术
7-8节
数学
美术
化学
英语
体育
9-10节
生物
美术
生物
英语
物理
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;
}
Tips：本站所有资源均收集自互联网，分享目的仅供学习参考，资源版权归该资源的合法拥有者所有。
Tips：若本站所发布的资源侵犯到您的合法权益，请及时联系 hqteam@qq.com 删除!
暂无评论内容