css表格样式(怎样设置)

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表格样式(怎样设置)-小白之家,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;

}

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论