CSS水平表格单元格间距:如何设置?

希望这是一个简单的问题,但我还没有找到解决办法。我想在表的列之间留出空间

范例

|单元格|<-空间->|单元格|<-空间->|细胞|

重要的一点是,我不希望边上有空间。有一个边框间距属性,但IE(6或7)中不支持它,因此这是不好的。它还可以在边缘留出空间

我想出的最好办法是在我的表格单元格上加上padded right:10px,然后在最后一个单元格中添加一个类来删除填充。这是不理想的,因为额外的空间是细胞的一部分,而不是在它外面。我想你可以用透明的边框做同样的事情

我还尝试使用jQuery:

$(函数(){
$(“table>tbody>tr:not(:last child”).addClass(“右填充”);
});

但即使在只有100行大小的表上,在某些情况下也需要200-400ms,这太慢了

谢谢你的帮助

谢谢

对于那些建议列,它们不起作用。请尝试以下操作:

<html>
<头部>
<title>布局</title>
<style type=“text/css”>
表{边框:1px纯黑色;}
td{背景:黄色;}
</style>
</head>
<车身>
<表格>
<col style=“右侧填充:30px;”gt;
<col style=“右侧填充:30px;”gt;
<col>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>

给每个表单元格一个透明的边框怎么样?我很确定这会帮你

表td{
边框:实心5x透明;
}

你只能像这样水平地应用它

表td{
左边框:实心10px透明;
}
表td:第一个孩子{
左边框:0;
}

这是一个完整的工作演示,我相信你正在努力完成

<!DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0 Strict//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html>
<头部>
<title>布局</title>
<style type=“text/css”>
桌子{
边框:1px纯黑;
}
表td{
背景:黄色;
左边框:实心10px透明;
}
表td:第一个孩子{
左边框:0;
}
</style>
</head>
<车身>
<表格>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>

我不相信IE6支持CSS:FirstChild,所以这里有一个解决方法

<!–-[if IE 6]>
<style type=“text/css”>
表td{
左边框:表达式(this.previousSibling==null?'0':'solid 5px transparent');
}
</style>
<![endif]-->

发表评论