CSS水平表单元格间距:如何? [英] CSS horizontal table cell spacing: how?
问题描述
示例
|单元格|< - 空格 - > |单元格|< - 空格 - > | Cell |
重要的一点是我不想在边缘留出空间。有一个border-spacing属性,但它在IE(6或7)中不被支持,所以这是不好的。
最好的办法是在我的表格单元格上填充右边:10px,并为最后一个单元格添加一个类删除填充。这不太理想,因为额外的空间是不在其外的单元的一部分。我猜你可以用透明的边框做同样的事情?
我也尝试过使用jQuery:
<$ p $ (right-padding); $ b $(table> tbody> tr:not(:last-child)。 b});
但即使在只有大约100行的表上, 400ms在某些情况下,这是太慢。
任何帮助表示赞赏。
谢谢
对于那些建议列他们不工作。试试这个:
< html>
< head>
< title>布局< / title>
< style type =text / css>
table {border:1px solid black;}
td {background:yellow;}
< / style>
< / head>
< body>
< table>
< ; col style =padding-right:30px;>
< col>
< tr>
< td> 1< / td>
< td> 2< / td&g吨;
< 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>
强>透明边框?我很确定这会为你做... ...
pre code $ table b
border:solid 5x transparent;
}
您只能像横向 ...
table td {
border-left:solid 10px transparent;
}
表td:第一个孩子{
border-left:0;
}
下面是我相信你正在努力完成的一个完整的工作演示。 。
<!DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp:/ /www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html>
< head>
< title>布局< /标题>
< style type =text / css>
表格{
border:1px纯黑色;
}
table td {
background:yellow;
border-left:实体10px透明;
}
表td:第一个孩子{
border-left:0;
}
< / style>
< / head>
< body>
< table>
< 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:first-child,所以这是一个解决方法。 ..
<! - [if IE 6]>
< style type =text / css>
table td {
border-left:expression(this.previousSibling == null?'0':'solid 5px transparent');
}
< / style>
<![endif] - >
Hopefully this is an easy one but I have not found a solution. I want to put space between columns on a table.
Example
| Cell |<- space ->| Cell |<- space ->| Cell |
An important point is that I do not want space on the edges. There is a border-spacing property but it is not supported in IE (6 or 7) so that is no good. It also puts space at the edges.
The best I have come up with is to put padded-right: 10px on my table cells and add a class to the last one to remove the padding. This is less than ideal because the extra space is part of the cell not outside it. I guess you could do the same thing with a transparent border?
I also tried using jQuery:
$(function() {
$("table > tbody > tr:not(:last-child").addClass("right-padding");
});
but even on tables that are only ~100 rows in size this was taking 200-400ms in some cases, which is too slow.
Any help appreciated.
Thanks
To those suggesting columns they do not work. Try this:
<html>
<head>
<title>Layout</title>
<style type="text/css">
table { border: 1px solid black; }
td { background: yellow; }
</style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<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>
How about giving each table cell a transparent border? I am pretty sure this will do it for you...
table td {
border:solid 5x transparent;
}
And you can only apply it horizontally like so...
table td {
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
Here's a complete working demo of what I believe you are trying to accomplish...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Layout</title>
<style type="text/css">
table {
border: 1px solid black;
}
table td {
background: yellow;
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
</style>
</head>
<body>
<table>
<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>
I do not believe IE6 supports the CSS :first-child, so here is a workaround for that...
<!–-[if IE 6]>
<style type="text/css">
table td {
border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
}
</style>
<![endif]-->
这篇关于CSS水平表单元格间距:如何?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!