css表格单元格间距cellspacing.docx
《css表格单元格间距cellspacing.docx》由会员分享，可在线阅读，更多相关《css表格单元格间距cellspacing.docx（7页珍藏版）》请在冰豆网上搜索。
css表格单元格间距cellspacing
竭诚为您提供优质文档/双击可除
css,表格单元格间距,cellspacing
篇一：
css控制table的cellpadding,cellspacing和align
css常规解决办法：
表格的cellpadding和cellpadding我们经常会用如下的方式来清除默认样式：
我们可以用table的border-collapse:
collapse;属性来代替cellspacing="0"，用th,td的padding:
0;属性来代替cellpadding="0"。
table{
border-collapse:
collapse;
border-spacing:
0;
}
th,td{
padding:
0;
}
还可以用expression来实现cellpadding="0"的样式：
table{
border-collapse:
collapse;
border-spacing:
0;
padd:
expression（this.cellpadding=0）;
}
css控制table的cellpadding,cellspacing和align
作者:
wywacczy日期:
20xx年07月12日发表评论（0）查看评论
背景
爆米花工作室面向客户提供网站服务时，通常需要提供报表相关的功能模块，而以html的table元素进行具体实现时，通常需要控制表格的水平位置、单元格的间距等方面，本文将就此方面进行阐述。
html实现
htmltable的属性中，align用于控制表格水平位置，cellpadding和cellspacing用于控制html表格中的单元格的间距。
例如，单元格间距为0、表格水平居中，实现的html代码片段如下：
虽然实现效果正常，但代码繁琐，每个表格必须单独设置，将造成页面臃肿。
因而，爆米花工作室推荐通过css进行实现：
css实现
实现的表格单元格间距为0、表格水平居中的css代码片段如下：
代码片段中：
（1）table的border:
0和border-collapse:
collapse;实现了cellspacing=”0″；
（2）tabletd的padding:
0;实现了cellspacing=”0″；
（3）margin-left:
auto;margin-right:
auto;左边和右边的外间距设置auto，表格居中。
相比较于html实现方式，css实现方式除了能够实现同样的效果，且与具体的表格分离，无需针对每个表格进行单独设置，因而更加简洁。
尤其（3）点，对于设置表格的水平位置对齐非常有帮助，例如：
设置表格水平位置左对齐的html代码片段和css代码片段，分别如下：
设置表格水平位置右对齐的html代码片段和css代码片段，分别如下：
篇二：
css的table单元格间距
我有一段html代码：
transitional//en""/retype/zoom/4c20356c561252d380eb6ed5pn=1row>或
里还包含：
、、标记。
它们分别表示表格的表头，表正文，表脚。
在打印网页内容的时候，如果表格很大，一页打印不完，和将在每一页出现。
（注意：
在ie中无效，但在Firefox有效）
经典的表格代码如下：
财政报表
.datalist{
border:
1pxsolid#429fff;/*表格边框*/
font-family:
arial;
border-collapse:
collapse;/*边框重叠*/
}
.datalisttr:
hover{
background-color:
#c4e4ff;/*动态变色,ie6下无效！
*/
}
.datalistcaption{
padding-top:
3px;
padding-bottom:
2px;
font:
bold1.1em;
background-color:
#f0f7ff;
border:
1pxsolid#429fff;/*表格标题边框*/
}
.datalistth{
border:
1pxsolid#429fff;/*行、列名称边框*/
background-color:
#d2e8ff;
font-weight:
bold;
padding-top:
4px;padding-bottom:
4px;
padding-left:
10px;padding-right:
10px;
text-align:
center;
}
.datalisttd{
border:
1pxsolid#429fff;/*单元格边框*/
text-align:
right;
padding:
4px;
}
-->
财政报表20xx-20xx
20xx
20xx
20xx
20xx
拨款
11,980
12,650
9,700
10,600
捐款
4,780
4,989
6,700
6,590
投资
8,000
8,100
8,760
8,490
募捐
3,200
3,120
3,700
4,210
20xx年统计
显示效果如下：
财政报表20xx-20xx
20xx20xx20xx20xx
拨款11,98012,6509,70010,600
捐款4,7804,9896,7006,590
投资8,0008,1008,7608,490
募捐3,20xx,1203,7004,210
销售28,40027,10027,95029,050
杂费2,1001,9001,3001,760
总计58,46057,85958,11060,700
20xx年统计
注意：
ie6只有标记支持:
hover伪类，其余标签都不支持！
并且标记的伪类有顺序：
a:
link->a:
visited->a:
hover->a:
active
利用dom的方法和属性实现对表格的动态操作
利用dom动态添加一行：
window.onload=function（）{
//插入一行
varotr=document.getelementbyid（"mytable"）.insertRow
（2）;varatext=newarray（）;
atext[0]=document.createtextnode（"cell1的内容"）;atext[1]=document.createtextnode（"cell2的内容"）;atext[2]=document.createtextnode（"cell3的内容"）;atext[3]=document.createtextnode（"cell4的内容"）;atext[4]=document.createtextnode（"cell5的内容"）;for（vari=0;i varotd=otr.insertcell（i）;
otd.appendchild（atext[i]）;
}
}
利用dom修改单元格内容：
window.onload=function（）{
varotable=document.getelementbyid（"mytable"）;
//修改单元格内容
otable.rows[3].cells[4].innerhtml="更改的内容";
}
利用dom删除一个单元格或一行：
window.onload=function（）{
varotable=document.getelementbyid（"mytable"）;
//删除一行，后面的行号自动补齐
otable.deleteRow
（2）;
//删除一个单元格，后面的也自动补齐
otable.rows[2].deletecell
（1）;
}
利用dom动态添加一列，并动态删除某行：
functionmydelete（）{
varotable=document.getelemen（css,表格单元格间距,cellspacing）tbyid（"mytable"）;
//删除该行
this.parentnode.parentnode.parentnode.removechild（this.parentnode.par
entnode）;
}
window.onload=function（）{
varotable=document.getelementbyid（"mytable"）;varotd;
//动态添加delete链接
for（vari=1;i otd=otable.rows[i].insertcell（5）;
otd.innerhtml="delete";
otd.firstchild.onclick=mydelete;//添加删除事件}
}
利用dom动态删除某一列：
functiondeletecolumn（otable,inum）{
//自定义删除列函数，即每行删除相应单元格
for（vari=0;i otable.rows[i].deletecell（inum）;
}
window.onload=function（）{
varotable=document.getelementbyid（"mytable"）;deletecolumn（otable,2）;//参数2:
表示要删除的列号}
升级会员 