css表格单元格间距cellspacing.docx
- 文档编号:9335030
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:7
- 大小:16.25KB
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:
表示要删除的列号}
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css 表格 单元格 间距 cellspacing
![提示](https://static.bdocx.com/images/bang_tan.gif)