CSS水平表单元格间距：怎么样？
希望这是一个容易的，但我还没有find一个解决scheme。 我想在桌子上的列之间放置空间。
例
| 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-400毫秒，这太慢了。
任何帮助赞赏。
谢谢
对于那些build议列他们不工作。 尝试这个：
<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>
如何给每个表格单元一个透明的边框？ 我很确定这会为你做…
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：第一个孩子，所以这是一个解决方法…
<!–-[if IE 6]> <style type="text/css"> table td { border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent'); } </style> <![endif]-->
这可能是你在做什么：
您可以使用两个值：第一个是水平细胞间距，第二个是垂直细胞间距。
<table style="border-spacing: 40px 10px;">
尝试使用col
例
<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也支持类:)
希望这可以帮助
达科
编辑：澄清一个col是一个元素声明在表顶部影响整个列。 第一个col元素将影响第一列，第二列col =第二列等等。 如果您希望将相同的样式分配给多个列，则可以将它们分组到colgroup中。
编辑2：经过一些更多的研究后发现，您可以在col元素上设置的唯一可靠样式是：
- 边境
- 背景
- 宽度
- 能见度
没有保证金或填充。 开溜！ 会设置列的宽度明确解决您的问题？
你也可以考虑使用一系列固定的宽度divs左边浮动。 这可能会让你对元素样式有更多的控制。
.row div { margin-right: 10px; float: left; width: 50px; } <div class="row"> <div>Cell One</div> <div>Cell Two</div> <div>Cell Three</div> </div>
如果你已经在你的细胞周围有了像我一样的边框，乔希的回答就行不通了。
我通过将整个表格稍微向左移动来解决问题，使用“position：relative; left：-10px”。 我把这个与cellpacing在桌子上。
<div id='sandbox'> <table cellspacing='10'> <tr> <td class='smoothBox'> ... </td> <td class='smoothBox'> ... </td> </tr> </table> </div>
和CSS：
#sandbox { float: left; position: relative; /* move the whole sandbox */ left: -11px; /* slightly to the left */ width: 950px; margin-top: 0px; padding: 1px; text-align: left; } #sandbox table { float: left; width: 100%; } #sandbox td { width: 300px; vertical-align: top; }
这是对我有用的，我希望它也可以帮助你。
你尝试使用col分组吗？
<table> <colgroup> <col class="right-padding" /> <col class="right-padding" /> <col /> </colgroup> <tbody> <tr> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table>
这是我的工作
border-collapse: separate; border-spacing: 0px 3px;
如果只是添加一个空的细胞，作为一个间隔？ 你可以使用上述col-tag给空单元格一定的宽度
<col/> <col style="width:20px"/> <col/> <col style="width:20px"/> <col/> <tr> <td>Data</td> <td>& nbsp;</td> <td>Data</td> <td>& nbsp;</td> <td>Data</td> </tr>
或者如果你想要做更多的事情，只需添加类，而不是使用内联样式…
乔希的答案相当好，但在我看来是不必要的复杂。 如果将表格边框设置为“隐藏”并将折叠模式设置为“折叠”，则会根据需要删除列外边框上的边框。
工作示例：
样式表：
table#my_table { border-collapse: collapse; border-style: hidden; } table#my_table td { border-left: 15px solid transparent; border-right: 15px solid transparent; }
HTML：
<table id="my_table"> <tr> <td>A1</td> <td>A2</td> <td>A3</td> </tr> <tr> <td>B1</td> <td>B2</td> <td>B3</td> </tr> </table>
