如何用css控制表格间距为1px的样式

html-css080

如何用css控制表格间距为1px的样式,第1张

用css控制表格间距为1px的样式方法：

css样式

.table{margin:0 0 15px 0border-collapse:collapse}

.table td{ background:#ffefedpadding:0 border-spacing:1pxborder:1px #fbaaa0 solid}

border-collapse:collapse

加在table的样式中

border-spacing:1px

border:1px #fbaaa0 solid

这两句加在td的样式中

指定的<table>为细边框，把<table>放在<div>中即可。

一、首先新建表格，代码如下：

<table width="500" border="1">  <tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr><tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr><tr>  <td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr</table>。

二、在table里加css样式，代码如下：

<table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse">  <tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td </tr><tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></tr><tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</td></table>。

三、单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间。单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离，border-collapse:collapse表示表格的两边框合并为一条即可。

通常有以下几种方法：

1、CSS法

可以在<table>标签中设置margin属性，即：style="margin:5px 0 5px 0"（顺序：上、右、下左，亦可简写为style="margin: 5px 0"），这段CSS的作用是在当前表格外部的上下各留出5px的空白。

2、空对象法

（1）空行。还可以在表格后敲回车换行，产生<p></p>标签，或者按Shift+回车软换行，产生<br>标签，都可产生一个空行。

（2）空表格。插入一个1行1列的表格，设置单元格的宽度、高度，在单元格中不输入内容。当单元格高度小于12px时，一定要将空格符 删掉，否则达不到设定高度，这一点非常重要。即：

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td height="5"></td>

</tr>

</table>

（3）空DIV。类似于空表格，插入一个DIV，设置其宽度、高度，超出隐藏即可。

<div style="width:100pxheight:5pxoverflow:hiddenclear:both"

3、透明图片法

可以在PS中新建一个5x5px的画布，背景设为透明，保存为透明GIF图片，然后在需要留间距的表格后面插入这个透明图片，将其宽度、高度可以任意调整，直到满意为直。

<img src="null.gif">