JS动态修改表格cellPadding和cellSpacing的方法_javascript技巧_脚本之家

2019-12-05 22:20栏目:竞技宝竞猜
TAG:

本文实例陈说了JS动态修正表格cellPadding和cellSpacing的艺术。分享给我们供我们参谋。具体如下:

平铺直叙table表格样式及代码大全(全卡塔尔(风度翩翩卡塔尔

下边包车型地铁JS代码通过校勘表格对象的cellPadding和cellSpacing属性来更改表格单元格的间距

单实线边框表格
function padding(){document.getElementById.cellPadding="15";}function spacing(){document.getElementById.cellSpacing="15";}

 

100 200
300 400

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>单实线边框表格</DIV></TD></TENCORE></TBODY></TABLE>

期望本文所述对大家的javascript程序设计有所扶持。

 

 

虚线边框表格

 

<TABLE style="BORDER-RIGHT: #ff6600 1px dashed; BORDER-TOP: #ff6600 1px dashed; BORDER-LEFT: #ff6600 1px dashed; BORDER-BOTTOM: #ff6600 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>虚线边框表格</DIV></TD></T科雷傲></TBODY></TABLE>

 

 

点线边框表格

 

 

<TABLE style="BORDER-RIGHT: #ff6600 2px dotted; BORDER-TOP: #ff6600 2px dotted; BORDER-LEFT: #ff6600 2px dotted; BORDER-BOTTOM: #ff6600 2px dotted; BORDER-COLLAPSE: collapse" borderColor=#ff6600 height=40 cellPadding=1 width=250 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>点线边框表格</DIV></TD></TENVISION></TBODY></TABLE>

 

 

双实线边框表格

 

<TABLE borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV align=center>双实线边框表格</DIV></TD></TTucson></TBODY></TABLE>

 

 

槽线边框表格

 

<TABLE style="BORDER-RIGHT: #00f901 10px groove; BORDER-TOP: #00f901 10px groove; BORDER-LEFT: #00f901 10px groove; BORDER-BOTTOM: #00f901 10px groove; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>槽线边框表格</DIV></TD></TWrangler></TBODY></TABLE>

 

 

脊线边框表格

 

<TABLE style="BORDER-RIGHT: #00f901 10px ridge; BORDER-TOP: #00f901 10px ridge; BORDER-LEFT: #00f901 10px ridge; BORDER-BOTTOM: #00f901 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>脊线边框表格</DIV></TD></T福睿斯></TBODY></TABLE>

 

 

内凹效果边框

 

<TABLE style="BORDER-RIGHT: #00f901 10px inset; BORDER-TOP: #00f901 10px inset; BORDER-LEFT: #00f901 10px inset; BORDER-BOTTOM: #00f901 10px inset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>内凹效果边框</DIV></TD></T凯雷德></TBODY></TABLE>

 

 

外凸效果边框

 

<TABLE style="BORDER-RIGHT: #00f901 10px outset; BORDER-TOP: #00f901 10px outset; BORDER-LEFT: #00f901 10px outset; BORDER-BOTTOM: #00f901 10px outset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>外凸效果边框</DIV></TD></T宝马X5></TBODY></TABLE>

 

 

内虚外实边框

 

<TABLE style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px dashed; BORDER-TOP: #4a4a84 2px dashed; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px dashed; BORDER-BOTTOM: #4a4a84 2px dashed">
<DIV align=center>内虚外实边框</DIV></TD></T奥迪Q3></TBODY></TABLE>

 

 

外虚内实边框

 

<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px solid; BORDER-TOP: #4a4a84 2px solid; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #4a4a84 2px solid">
<DIV align=center>外虚内实边框</DIV></TD></T福特Explorer></TBODY></TABLE>

 

 
无边框表格

 

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center bgColor=#fffbec border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>无边框表格</DIV></TD></THaval></TBODY></TABLE>

 

 

隐藏下边框

 

<TABLE style="BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BOCR-VDEWrangler-BOTTOM: medium none" height=40>掩盖下面框</TD></TTucson></TBODY></TABLE>

 

 

隐藏上边框

 

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BO瑞虎DECRUISER-TOP: medium none" height=40>隐瞒上面框</TD></T奥德赛></TBODY></TABLE>

 

 

隐藏左边框

 

<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BOPRADODE奥迪Q3-LEFT: medium none" height=40>遮盖左侧框 </TD></T奥迪Q5></TBODY></TABLE>

 

 

隐藏右边框

 

<TABLE style="BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BO猎豹CS6DE昂Cora-GL450IGHT: medium none" height=40>掩盖左边框 </TD></TRubicon></TBODY></TABLE>

 

 

隐藏左右边框

 

<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BOVision GTDE奥迪Q3-PAJEROIGHT: medium none; BOLANDDE奥德赛-LEFT: medium none" height=40>隐讳左左边框 </TD></T兰德宝马7系></TBODY></TABLE>

 

 

隐藏上下边框

 

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BOKugaDE奥迪Q7-TOP: medium none; BO科雷傲DEPAJERO-BOTTOM: medium none" height=40>隐藏上上边框</TD></T本田UR-V></TBODY></TABLE>

 

 

只显示上边框

 

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=above>
<TBODY>
<TR align=middle>
<TD height=40>只体现上面框</TD></T本田CR-V></TBODY></TABLE>

 

 

只显示下边框

 

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=below>
<TBODY>
<TR align=middle>
<TD height=40>只突显上边框</TD></TQashqai></TBODY></TABLE>

 

 

只显示左边框

 

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=lhs>
<TBODY>
<TR align=middle>
<TD height=40>只展示左侧框</TD></T揽胜></TBODY></TABLE>

 

 

只显示右边框

 

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:JS动态修改表格cellPadding和cellSpacing的方法_javascript技巧_脚本之家