Jor*_*die 38 html javascript css jquery layout
希望这是一个简单的,但我还没有找到解决方案.我想在表格的列之间放置空格.
例
| Cell |<- space ->| Cell |<- space ->| Cell |
重要的一点是我不希望边缘有空间.有一个border-spacing属性,但在IE(6或7)中不支持,所以这是不好的.它还在边缘放置空间.
我提出的最好的方法是将padded-right:10px放在我的表格单元格上,并在最后一个单元格中添加一个类来删除填充.这不太理想,因为额外的空间是细胞的一部分而不是它的外部.我想你可以用透明边框做同样的事情吗？
我也尝试过使用jQuery:
$(function() {
$("table > tbody > tr:not(:last-child").addClass("right-padding");
});
但即使在只有大约100行的桌子上,在某些情况下这需要200-400ms,这太慢了.
任何帮助赞赏.
谢谢
对于那些暗示列不起作用的人.试试这个:
<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>
Jos*_*ola 20
如何为每个表格单元格提供透明边框？我很确定这会为你做...
table td {
border:solid 5x transparent;
}
你只能这样水平地应用它......
table td {
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
这是我相信你想要完成的一个完整的工作演示......
<!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>
我不相信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]-->
小智 11
它可能是你在寻找什么:
您可以使用两个值:第一个是水平单元格间距,第二个是垂直单元格间距.
<table style="border-spacing: 40px 10px;">
尝试使用cols
例
<table>
<col style="padding-right:20px;" />
<col style="padding-right:30px;" />
<col />
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
cols也支持类:)
希望这可以帮助
达科
编辑:澄清a col是在表格顶部声明的元素,以影响整个列.第一个col元素将影响第一列,第二个col =第二列,依此类推.如果您希望将相同的样式分配给多个列,则可以将它们分组到colgroup中.
编辑2:经过一些研究后发现,您可以在col元素上设置的唯一可靠样式是:
没有边距或填充.开溜!设置列的宽度是否明确解决了您的问题？
您尝试过使用 col 分组吗？
<table>
<colgroup>
<col class="right-padding" />
<col class="right-padding" />
<col />
</colgroup>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>